Getting there

For the past few months, we have been challenged to come up with new, functional ways to achieve the main point of this app, which would be giving feedback on the state of the environment. We have been sketching, testing, drawing flow charts and wireframes, and finally were at the stage where we more or less agree on the visual style, interaction methods and functionalities, and can start to build our hi-fi prototype.

The process has been really challenging, educative, and sometimes even frustrating when we have seemed to get stuck on details, but hopefully in the end the result will be rewarding, as we are not settling with the obvious or given solution, but challenging the current ways of interaction for these types of rating apps: something you cannot do that often in projects where risk averse decision makers are sitting on the money.

All of us have made multiple sketches, and throughout the past few weeks, we have been emailing screens to each others, trying to create as many options as possible to choose from, as well as to communicate our design-ideas. Below are some drafts I have compiled throughout the process.

1) The rating process:
Each category is rated individually. A growing bar along with a representative smiley will indicate what kind of feelings the user associates to the place. E.g. until the half way of the circle shaped bar, the user expresses negative feelings, and from the half way up, the feelings are regarded as positive. The red arrows indicate movement.

2) The exploration process:

The idea is to cluster individual reviews to larger glyphs, which are then separated into smaller clusters and eventually into individual ratings when the user zooms the map. We were shown a great library called leaflet.js that could help us create the effect, an example can be seen for example here: http://leafletjs.com/2012/08/20/guest-post-markerclusterer-0-1-released.html

3) Visual design:

We agreed that in order for our interaction method to work, the app needs to be really simply designed and we agreed to follow flat design rules, that aim for visual clarity and simplicity. Below is my first suggestion on the visuals.

I've also tried out with little more visual smileys, like the one below, but we decided that this style is too much. The glyphs need to be kept as simple as possible as they need to work in a really small size. Also, we don't want to associate our colors with anything else than rating, so for example blue tears might introduce unintended associations.

We continue from here by defining the visual appearance of the app for our presentation, and by trying to craft a functional browser based demo using javascript, html and css, and perhaps also by employing phonegap to make the app feel more like a native app instead of a mobile website.

MapU testing

This spring we have continued on Rate the State of Your Local Environment project.

We have been exploring different evaluation methods and maps as well as Sara Jacobsen’s Master of Arts thesis on urban planning. Here are some map and rating examples:

As it turned out we were unable to create a working smartphone app, so we have been concentrating on the UI.

I attended a Nodebox workshop and I tried out different approaches to the user input like movement and active corners:

Here turning the phone to different positions (first row) will give different ratings as well as "hot spots" (lower row) and the rating will show as color changes on the map: bad –> unsaturated, good –> saturated + warm colors.

I created a demo with AfterEffects where shaking gives bad rating and a kiss on the phone will be good. In the movie I also added sounds: agony –> bad and baby laugh –> good.

Movie can be seen at: http://www.youtube.com/watch?v=kzcXyeRskLw&feature=youtu.be

At some point there were also experiments with fragmented maps, small game elements and Photoshop filtered maps.

After all different experiments we ended up to use facial expressions as we did in the fall and decided to rate three things: air, sound and the looks of the environment. Instead of trying to create 11 expressions we decided five expressions would be enough. The rating itself is more accurate.

The rating is based on touch and the longer the user holds down the finger, the better rating.

As in these facial studies can be seen, I had a problem with negative rating: should the starting point be indifferent (as in first face) or most negative? So I started experimenting on combining the three elements in one face. Tapping would give bad rating, holding finger down a good one. Here too the rating would happen in order: Breathe, Listen, Look.

First picture is the starting point, second the worst rating and third the best. I wanted add some more visual feedback to the map as well as to the faces.

As we decided to divide the three aspects into three faces I made new faces and tested hand movements.

I created a tiny app icon and came up with a name MapU. I made a html site and I am updating as new suggestions from other group members come forth.

The html site is at address: www.satuilta.fi/MapU/mapu.html

Designing for the Thumb

While playing this imaginatory game with the non existing UI I am constantly producing auditive feedback for myself. Making different “swooshs” and “clicks” helps me to go through the UI and its different functions. So, I am creating feedback ´since there is no interaction on the screen yet. More thoughts about UI sounds later...

Another thing I have noticed is that I use mainly my thumb for interacting with my smartphone. All these visualizations for gestures for iOS devices use index finger! And what is the reason for that? I use index finger only for pinch and spread actions. iPad is a different story! There are numerous studies that indicates that the use of an index finger has decreased since sms:ing started to be part of everyday communication. (I have to find this one specific study where they call people who uses thumbs as peukaloinen, thumbling).

It is interesting and inspiring to design an UI that can be used with one hand -- and more specifically an UI that is ambidextrous, so pick a hand! The app can be used also with two hands: the user holds the smartphone on the other hand and interacts with the other hand. I rarely do this my self! These were the main reasons why I started developing an UI with four active corners instead of buttons and switches.

How about you? Have you paid any attention which fingers you mainly use with your smartphone?

The Size of the Thumb

The way you hold the device is important when designing the interaction and the size of your finger defines the measurements of the UI. But how big is my thumb?

It feels like all the platforms give different measurements for these tap targets. But let´s concentrate on iOS  devices. IOS developer library offers colossal amount of information related UI design for touch screen devices. According to this source the minimum size of a tap target is 44 points, or about 1/4" or 7mm. To make this more concrete here is an example: in the iPhone keyboard the keys are 44 points tall but only 30 points wide. To fit in the full QWERTY keyboard they had to make keys more narrow -- and this is the reason why it is so annoying to write with an iPhone. You have to focus and edit your text multiple times to make it right.

Summa summarum: 44 x 44 point is the absolute minumum size for tap target but for our purposes it is too small. So, let´s make it big enough and easy to use.

The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels. (http://en.wikipedia.org/wiki/Finger_%28unit%29)

About units: Pixel is the appropriate unit of measurement to use when discussing the size of a device screen or the size of an icon you create in an image-editing app. Point is the appropriate unit of measurement to use when discussing the size of an area that is drawn onscreen.

On a standard-resolution device screen, one point equals one pixel, but other resolutions might dictate a different relationship. On a Retina display, for example, one point equals two pixels.

(https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Characteristics/Characteristics.html#//apple_ref/doc/uid/TP40006556-CH7-SW1)

 References:

Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices
http://research.microsoft.com/pubs/75812/parhi-mobileHCI06.pdf

Touch key design for target selection on a mobile phone
http://arnetminer.org/publication/-495564.html

https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

 

UX Design Guidelines for Smartphones http://uxdesign.smashingmagazine.com/2011/10/06/not-your-parents-mobile-phone-ux-design-guidelines-smartphones/