"I need some useful and buzzworthy collateral to hand out at a conference next month. The audience is tech/development oriented so if you could also make it relevant to them that would be great"
Here's what I came up with
Here's where I share my thoughts & ideas with the online design community.
July 17, 2012
August 12, 2010
Producing Better Facial Composites for Police Use
World of Warcraft players call them 'Toons', Nintendo fans probably have a 'Mii' but the rest of us are more familiar with the term 'avatar'
These digital representations of one’s self are commonplace within the video game industry. Players customize the physical features of their avatar as they see fit. The game developers probably expect players to render a true-to-life self-portrait but what often happens is quite the opposite. Players choose to create an avatar they feel is a ‘better’ representation of their self. They exaggerate, enhance or completely re-envision their self-image. Customizing them is a significant part of the overall experience.
I read an online news article this morning that featured an image released by the Michigan State Police. The image was a facial composite of a man suspected in connection with a three-state serial stabbing spree. Let’s take a look at the sketch and a photograph of the arrest suspect.
Now, let’s compare the achievements of the sketch vs. the photograph. The sketch simply depicts a male with facial fair and a hat. The sketch doesn't depict an ethnicity, eye color, hair color or any of the correct facial features.
It's about time we ditched traditional police sketch artist. According to Wikipedia, “the FBI maintains that hand-drawing is still the correct method for constructing a facial composite.” What if, instead, they utilized the system of avatar creation from Video Games? Victims/Witnesses would digitally construct features of criminals without having to wait for the render by the sketch artist. These digital composites should not be as simple as Nintendo Miis, yet still more complex than XBOX 360 avatars. The user could choose which features to start with and revisit/revise their creation throughout the process.
My name is Verne Troyer, I live in Hollywood, California, and I’m a mage! A master of the arcade.
These digital representations of one’s self are commonplace within the video game industry. Players customize the physical features of their avatar as they see fit. The game developers probably expect players to render a true-to-life self-portrait but what often happens is quite the opposite. Players choose to create an avatar they feel is a ‘better’ representation of their self. They exaggerate, enhance or completely re-envision their self-image. Customizing them is a significant part of the overall experience.
I read an online news article this morning that featured an image released by the Michigan State Police. The image was a facial composite of a man suspected in connection with a three-state serial stabbing spree. Let’s take a look at the sketch and a photograph of the arrest suspect.
Now, let’s compare the achievements of the sketch vs. the photograph. The sketch simply depicts a male with facial fair and a hat. The sketch doesn't depict an ethnicity, eye color, hair color or any of the correct facial features.
It's about time we ditched traditional police sketch artist. According to Wikipedia, “the FBI maintains that hand-drawing is still the correct method for constructing a facial composite.” What if, instead, they utilized the system of avatar creation from Video Games? Victims/Witnesses would digitally construct features of criminals without having to wait for the render by the sketch artist. These digital composites should not be as simple as Nintendo Miis, yet still more complex than XBOX 360 avatars. The user could choose which features to start with and revisit/revise their creation throughout the process.
My name is Verne Troyer, I live in Hollywood, California, and I’m a mage! A master of the arcade.
April 22, 2010
Design Exercise: daily planner
Last night at Vitorio Miliano's Design Workshop he prompted us with the task of designing a daily planner. The complaint was that Microsoft Outlook's mini calendar doesn't do a great job of displaying both events and time necessary to prepare for them. Daily planners should display a buffering time to help people better manage their time before and after events. For example: if you had a meeting downtown but you know it will take you 5 minutes to wrap-up at the previous event and an additional 30 minutes of driving then the UI should reflect that time needed to prepare for the actual meeting. Here's what I came up with.
This first figure is the framework for our daily planner's data. The upper half is a linear representation of one day's time divded into two halves. In this example, the user has set their normal daily activity from 7 A.M. to 11 P.M. The lower half is a space for daily checklist items.
The first (daily) step to this interaction is entering data into the checklist section. These are tasks that should be completed before the day's end but will not have major ramifications if not tackled before the day's end. In this scenario, our user has to offered to walk the dog for their roommate, take the trash out and call their mother among other tasks.
The second step is entering data into the time bar. Users would reserve blocks (or chunks) of time to represent events. Events should be thought of as highly important tasks that cannot be forgotten or missed. Events, unlike checklist items, must be completed at a scheduled time and in a particular order. The colors used in this example represent different types of events: Blue represents professional/career events, Yellow represents social functions, Green represents personal or family time and Red represents personal development. In this scenario the user has Work starting at 9AM, Lunch with a friend at 12:15, Dinner at 6:15, a graphic design workshop at 6:45 and finally a late night jog with their neighbor at '8ish'. One could see that this user has a schedule conflict: their jog and design workshop overlap each other as represented by blocks. This blocky representation of time allows us to see when we've stacked our time too high with events. Had this user planned on attending a third event at 8pm then another block of time would be stacked beneath the other two events.
The next step in this interaction is entering the last set of data into the time bar. Again users would reserve blocks of time for events; but this time they will determine how much time is needed to prepare for each event. These buffer times should include the amount of time it takes to prepare and travel. These blocks of time are located in the time bar directly above and before the scheduled event takes place. Their color matches the relative event. The buffering block's form is represented as being half solid. Events are represented as solid color because they are non-negotiable time frames. The time it takes to prepare and travel to a scheduled event is subjective: the user could include an extra 10 minutes of travel time but regardless of when they arrive at their destination the event still occurs at a specific time. In this scenario, the user has booked themselves pretty tight with buffer time. This UI also displays to the user that if they should feel like leaving their design workshop to jog with their neighbor, they would have to leave their event at 730. This presentation of time creates an interesting opportunity for people who regularly make brief appearances to multiple events in a single day. It gives them the information they would need to make time-sensitive plans and actions.
In this figure we see what a day in progress looks like. The time of day is just after 10:30 am and the user has completed three of their checklist items. The dashed red line represents the constant of time while it leaves a trail of muted color represented time past.
Another example, this time shortly after 7PM with five items completed on their daily checklist.
Here we have an example of nearly an entire day passed. It's almost 10:30pm and the user is wrapping up their day and checking their daily planner before bed. They've inserted two notes for the day (represented by colored triangles) as actionable items or reminders for the future. We can also see in this scenario that the user didn't manage to take out their trash or get a recipe from their friend, Jillian.
This first figure is the framework for our daily planner's data. The upper half is a linear representation of one day's time divded into two halves. In this example, the user has set their normal daily activity from 7 A.M. to 11 P.M. The lower half is a space for daily checklist items.
The first (daily) step to this interaction is entering data into the checklist section. These are tasks that should be completed before the day's end but will not have major ramifications if not tackled before the day's end. In this scenario, our user has to offered to walk the dog for their roommate, take the trash out and call their mother among other tasks.
The second step is entering data into the time bar. Users would reserve blocks (or chunks) of time to represent events. Events should be thought of as highly important tasks that cannot be forgotten or missed. Events, unlike checklist items, must be completed at a scheduled time and in a particular order. The colors used in this example represent different types of events: Blue represents professional/career events, Yellow represents social functions, Green represents personal or family time and Red represents personal development. In this scenario the user has Work starting at 9AM, Lunch with a friend at 12:15, Dinner at 6:15, a graphic design workshop at 6:45 and finally a late night jog with their neighbor at '8ish'. One could see that this user has a schedule conflict: their jog and design workshop overlap each other as represented by blocks. This blocky representation of time allows us to see when we've stacked our time too high with events. Had this user planned on attending a third event at 8pm then another block of time would be stacked beneath the other two events.
The next step in this interaction is entering the last set of data into the time bar. Again users would reserve blocks of time for events; but this time they will determine how much time is needed to prepare for each event. These buffer times should include the amount of time it takes to prepare and travel. These blocks of time are located in the time bar directly above and before the scheduled event takes place. Their color matches the relative event. The buffering block's form is represented as being half solid. Events are represented as solid color because they are non-negotiable time frames. The time it takes to prepare and travel to a scheduled event is subjective: the user could include an extra 10 minutes of travel time but regardless of when they arrive at their destination the event still occurs at a specific time. In this scenario, the user has booked themselves pretty tight with buffer time. This UI also displays to the user that if they should feel like leaving their design workshop to jog with their neighbor, they would have to leave their event at 730. This presentation of time creates an interesting opportunity for people who regularly make brief appearances to multiple events in a single day. It gives them the information they would need to make time-sensitive plans and actions.
In this figure we see what a day in progress looks like. The time of day is just after 10:30 am and the user has completed three of their checklist items. The dashed red line represents the constant of time while it leaves a trail of muted color represented time past.
Another example, this time shortly after 7PM with five items completed on their daily checklist.
Here we have an example of nearly an entire day passed. It's almost 10:30pm and the user is wrapping up their day and checking their daily planner before bed. They've inserted two notes for the day (represented by colored triangles) as actionable items or reminders for the future. We can also see in this scenario that the user didn't manage to take out their trash or get a recipe from their friend, Jillian.Finally we have an example of a summary of daily notes. This would appear near the end of the day or the first thing to appear the following morning. Daily notes include a list of all incomplete checklist items for the day and footnotes from all events. From here the user is able to automatically include these items into their daily checklist for tomorrow ~or~ delete them.
So there you have it. This started as a simple wire framing exercise sketch turned digital mock-up. That being said this is not the final solution visually as there are more choices to be made and areas to fine tune: but I feel the essence of the interaction is here.
March 31, 2010
Design Exercise: bus stop UX
In Dan Saffer's "Designing for Interaction" he lists several real-world opportunities for improvement in UX. One of these examples is "waiting at the bus stop with no idea when the next buss will arrive." Well, as I was waiting at the bus stop, with no idea when my bus was supposed to arrive when I came up with an idea: A bus stop kiosk (obelisk) of sorts. Basically the idea is to replace the current road-side signs and replace them with solar powered towers that notify people how soon their bus should be arriving.
How it would work
As the bus passes each stop on its scheduled run, it sends a geolocation signal the next several stops informing them of the bus's current location. This would pair with data taken on average travel time from stop to stop. The result is a system that can produce meaningful information to passengers.
As the bus passes each stop on its scheduled run, it sends a geolocation signal the next several stops informing them of the bus's current location. This would pair with data taken on average travel time from stop to stop. The result is a system that can produce meaningful information to passengers.
Implementation
- Each bus would need to be equipped with a device that allows digital signaling between stop and bus
- Each bus stop would need to be equipped with a similar device, and a power source (ideally solar)
The Rules
- Depending on the distance the bus is to the actual stop, the light matching the bus number will begin to pulse more rapidly on the corresponding panel
- Any stop the bus passes will reset to a default signal (dim light and very slow pulse)
- A route which is not in service for that day (or at certain times of the day) would show no light at all at each applicable stop
So maybe the execution isn't perfect, but the idea is there. I took a stab at this challenge in an afternoon: what would you do differently? What did I miss?
March 3, 2010
Video Games won't need controllers soon
Skinput
Project Natal
And then this dude
The future of gaming is bright. These UI could serve so many more users beyond entertainment. The Nintendo Wii has already gotten a lot of praise from physical rehabilitation centers: what about motion controlled training for sports events? What if Agoraphobics could practice driving a car using Google Earth data? Soldiers could experience close quarters combat without risk. Rich experiences ahead!
end
Christopher Griego
graphic designer
Austin, TX
portfolio - christophergriego.com
Project Natal
And then this dude
The future of gaming is bright. These UI could serve so many more users beyond entertainment. The Nintendo Wii has already gotten a lot of praise from physical rehabilitation centers: what about motion controlled training for sports events? What if Agoraphobics could practice driving a car using Google Earth data? Soldiers could experience close quarters combat without risk. Rich experiences ahead!
end
Christopher Griego
graphic designer
Austin, TX
portfolio - christophergriego.com
March 2, 2010
Design Exercise: Nutrition fact labeling
I am not a fan of the current FDA regulated Nutrition labeling. Counting calories is difficult enough but what about the people interested in measuring their daily protein intake? The problem is that nutrition labeling is an overly complicated and insufficient means of 'being informed' about what you are actually eating. Serving Sizes are always unique and never quite accurate as some self serve drinks in cold cases contain 2 servings. Let's think about this for one second. You're at Target, you reach into a cold case for something like a Snapple but never bother to check the nutrition label because you assume that it's healthy. I mean, just look at it, graphics of fruit and labeling like "contains REAL fruit juice"! The sad truth is that these products usually contain a second serving and consuming an entire bottle spikes your blood sugar levels and then before you know it you've consumed the same calories you could've had by eating a healthy snack that would have made you less hungry for a longer period of time.
Below is an exercise (definitely not THE solution) in labeling 4 different foods nutrition levels calories for calorie. Regardless of serving size, for every nibble, bite or entire package you consume-your nutrition level is reflected. The formula follows the FDA recommended intake of Carbs, protein and fats per calorie.
Where 2000 calories = 65gFat(585calories) + 300gCarbs(1200calories) + 50gProtein(200calories)
One potential problem with this design system is that foods which are generally acknowledged as 'healthy' might have readings which seem off the chart or unhealthy. Below is an example of how Almonds would rate.
There is possibility that a parent shopping for their child might see the high amount of fats as unhealthy. In reality a huge percentage of the fats in almonds are great for maintaining cholesterol levels. Ideally a diet including almonds would necessitate the rest of foods eaten throughout the day being low in fat, high in carbohydrates, and stable protein levels....Wait that sounds like Fruits, Vegetables and Dairy products....
Finally we have Apples.
You can clearly see that apples are a bit higher than the FDAs recommended carbohydrate intake-severely low in protein and fat. This is why you should not sustain yourself on Apples alone. Again, a well balanced diet is key.
Below is an exercise (definitely not THE solution) in labeling 4 different foods nutrition levels calories for calorie. Regardless of serving size, for every nibble, bite or entire package you consume-your nutrition level is reflected. The formula follows the FDA recommended intake of Carbs, protein and fats per calorie.
Where 2000 calories = 65gFat(585calories) + 300gCarbs(1200calories) + 50gProtein(200calories)
First we have a nice juicy-carcinogen-filled big mac.
Carbs are slightly low, protein is very high and fat also very high. If you ate Big Macs for breakfast lunch and dinner your cholesterol levels would rise from the fat and proteins but no energy to maintain a healthy heart without carbohydrates. Of course, we already know what happens when you live off of McDonald's food...
Carbs are slightly low, protein is very high and fat also very high. If you ate Big Macs for breakfast lunch and dinner your cholesterol levels would rise from the fat and proteins but no energy to maintain a healthy heart without carbohydrates. Of course, we already know what happens when you live off of McDonald's food...Our next contestant is Oreos. Chocolate + lard. YUM.
Oreos are a staple of the vegan diet because they contain so many synthetics they don't include any organic ingredients derived from animals. Oreos are a nice fit for the carbohydrate intake but imagine how weak you would be and overweight...Now think about obesity in American children and diabetes. Any relationship? Also, I read that sales of double stuffed Oreos far surpass regular Oreos nowadays.
Oreos are a staple of the vegan diet because they contain so many synthetics they don't include any organic ingredients derived from animals. Oreos are a nice fit for the carbohydrate intake but imagine how weak you would be and overweight...Now think about obesity in American children and diabetes. Any relationship? Also, I read that sales of double stuffed Oreos far surpass regular Oreos nowadays.One potential problem with this design system is that foods which are generally acknowledged as 'healthy' might have readings which seem off the chart or unhealthy. Below is an example of how Almonds would rate.
There is possibility that a parent shopping for their child might see the high amount of fats as unhealthy. In reality a huge percentage of the fats in almonds are great for maintaining cholesterol levels. Ideally a diet including almonds would necessitate the rest of foods eaten throughout the day being low in fat, high in carbohydrates, and stable protein levels....Wait that sounds like Fruits, Vegetables and Dairy products....Finally we have Apples.
You can clearly see that apples are a bit higher than the FDAs recommended carbohydrate intake-severely low in protein and fat. This is why you should not sustain yourself on Apples alone. Again, a well balanced diet is key.What I've learned from this design quickie is that nutrition labeling is no easy task: but it isn't impossible. There just has to be a more effective way of communicating nutrition levels for consumers. My concept excludes the important information regarding Vitamin and Mineral intake so a subsystem dedicated to those would need to be implemented. Additionally I haven't listed a caloric intake so people counting their calories would be in distress! Whole Foods has implemented their ANDI nutrition rating but I'm not a proponent of their rating system. I have to give a huge shout-out to the Nuval Rating system for their work done so far. I'd like to see their identity system flushed out a tiny bit more but their heads are in the right places.
February 7, 2010
I call them 'Geos'
These are some images I created recently. They derived from an experiment in form, space and depth. I call them geos.
end
Christopher Griego
graphic designer
Austin, TX
portfolio - christophergriego.com
Christopher Griego
graphic designer
Austin, TX
portfolio - christophergriego.com
Subscribe to:
Comments (Atom)