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/

The infinite space of the limited screen --- talking about the expansion of the mobile interface from space point of view

In architecture, space mainly refers to the visual level feel three-dimensional physical space. Space expansion is from a different dimension to seek solutions, including storage, hierarchical segmentation and the expansion of the perception. Analogy to the mobile experience, the most basic is how to make the limited screen carry more information and features, so users feel the space comfortable. In the app we designed, there are pieces of information shown on the result page. Therefore, I think maybe we can talk about the information design from the architectural space expansion concept in terms of information storage, hierarchical and changing faces.

Storage

Storage is to put away the infrequently used items to keep the surface neat and tidy. This way is particularly suitable for the integration of the fragmented functions.

There are 3 steps to do it.

a) Defining rules and content

Defining rules and content is to get the functions you want to show to the users straight, the key point is the label of the drawer should be really clear so that the user can find them easily whenever they want. There are many forms of the storage from the interaction behavior point of view. For instance, the most typical approach as Path sidebar style, up and down folding, sunk and so on. The purpose is to hide the infrequently used items, and there is an ever-present entrance so that when the user needs to quickly open.

b) After defining the rules and content, users can easily extend the content.

This is particularly suitable for the application of the Notepad or schedule, relatively speaking, the primary source of information for such applications is the user itself, and designers can not predict and control the order of the information. Therefore only define the rules of the storage is particularly suitable for the apps which conclude unlimited contents.

c) User can customize the content
The typical example is the iPhone app interface 

2.There are two ways of storage.

a) Drawer with door

Although the drawer is closed, there should be the ever-present entrance to indicate the user where to start.

b) Drawer without door

That means there is no door for the drawer, user have to open it by gestures without having the doors.

Hierarchical information

Space is limited, so in order to use the more effective, space can be divided into sub-module to show content. Whether it is simply the list, waterfalls streams, or anything else, there will always be found from other dimensions of the remaining space. Analog to traffic, aircraft, road traffic, underground track, is to make full use of the space.

1. The multiple tab architecture

2. Lower level filter (including drop-down and floating layer style)

3. Immersive experience

Restore the camera rule “Everything looks small in the distance” that the more information can be showed by Hierarchical segmentation.

Face-changing

The small space will not be cared in the web design, the status bar is the status bar. It even can be an empty if the absence of the state. However in the mobile production design, space is considered valuable, it is also regarded as a solution to show other related content which is similar as the “if-then” construction in programming language.

1. To show different status in the same place

2. To show different functionality in the same place
As shown below, it displays the name of the contact list by default, but when the user needs to search, it will expand the search box.

Functional Aesthetics

Functional Aesthetics

Stephen Anderson focuses in his book Seductive Interaction Design on practical Web applications, but many of his notions on ‘curious’ insights of human behaviour are useful in other areas of design as well.

Anderson puts emphasize on good experience: “It wasn’t a focus on usability that made this a great experience. It was psychology.” (Anderson 2011, 454) He, however, makes a distinction between a good and a great experience: ease of use compared to desire to use.

While aesthetics are only one part of the user experience, they are the most frequently dicussed and misunderstood. On the one hand, we instinctively seem to know that a sense of style is important. Visual designers are constantly arguing for “good design”. On the other hand, when we get into discussions of utility and usefulness, it’s easy to marginalize these visual considerations as decoration.

So why aesthetics? For starters aesthetics include everything that appeals to senses – not just what we see, but also what we hear, smell, taste, and feel. According to Wikipedia: “aesthetics examines our response to an object or phenomenon”. How then do aesthetic design choices influence understanding and emotions, and how do understanding and emotions influence behaviour?

Cognition is the process of knowing. Based on patterns and experiences, we learn how to understand the world around us: What does this color suggest? Cognitive science studies how people know things, and aesthetics play a critical role in cognitive processing.

When talking about affect, we’re talking about feelings and emotions. Research into attention, persuasion, choice, happiness, learning, and other similar topics suggests that more attractive is likely to be more usable by most people. Neurobiologist Antonio Damasio comments on emotions: “Emotion is not a luxury: it is an expression of basic mechanisms of life regulation developed in evolution, and is indispensable for survival. It plays a critical role in virtually all aspects of learning, reasoning, and creativity. Somewhat surprisingly, it may play a role in the construction of conciousness.” (Damasio 2004)

Contrary to popular opinion, things that are enjoyable will be perceived as easy to use and efficient.

Researchers in Japan set up two ATMs that were identical in function, the number of buttons, and how they worked. The only difference was that one machine’s buttons and screens were arrenged more attractively. In both Japan and Israel (where this study was repeated to test for cultural differences), researchers observed that subjects encountered fewer difficulties with the more attractive machine. A point of clarification: if you read the original studies, you’ll see that people perceived that the attractive machine actually worked better. (Kurosu and Kashimura 1995, Noam Tractinsky 1997)

So why is this? Donald Norman in his book Emotional Design offers an explanation based on evolutionary biology and on what we know about how our brains work. Basically, when we are relaxed, our brains are more flexible and more likely to find workarounds for difficult problems. In contrast, when we’re frustrated and tense, our brains get a sort of tunnel vision where we only see the problem in front of us.

Norman offers also another explanation: we want those things that we find pleasing to succeed. We’re more tolerant of problems in things we find attractive. How many of us have tolerated faults in a person due to their attractiveness?

Other studies have also explored connections between visual aesthetics and usability, and few recent studies are finding more direct correlations between visual aesthtetics and actual performance.

Not only do aesthetics affect perceived usability, they also influence actual performance.

Recent studies on emotions are finding that we can’t actually separate cognition from affect. Separate studies in economics and in neuroscience are proving that: “affect, which is inexplicably linked to attitudes, expectations and motivations, plays a significant role in the cognition of product interaction ... the perception that affect and cognition are indipendent, separate information processing systems is flawed”. (Spillers 2004) 

At all times, we are evaluating (affect) and interpreting (cognition) the world around us.

In short, our rational choices aren’t so rational as we would like to believe.

Anderson uses the same mantra of modern architecture as Parsons and Carlson in Functional Beauty: “form follows function”. Frank Lloyd Wright changed this phrase to “form and function should be one, joined in a spiritual union,” using nature as the best example of this integration.

When thinking of aesthetics in design, it shouldn’t be the icing on the cake, but an integral part of the whole design process from the start.

Anderson adds aesthetical associations as an important part in decision making and gives as an example the design of Apple’s iPod: Why do so many people consider it as a “clean” device? Actually Jonathan Ives, Apple’s senior vice president of Design, once worked for an agency that designed bathroom appliances. What’s important is that “consciously or unconscoiusly, the iPod materials reference a convention of ‘cleanliness’ that everybody interacts with everyday – a bathroom.

These aesthetic associations are evident in other Apple products. If you own an Apple laptop, you may have noticed the soothing sleep-light indicator that’s visible when your computer is “sleeping”. The rate at which this light fades in and out is comparable to that of the average respiratory rate for adults, about 12 to 20 breaths per minute. Apple owns the patent for a Breathing Status LED Indicator, which “mimics the rhythm of breathing which is psychologically appealing”.

References

Anderson, Stephen P. 2011. Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences. Berkeley, California: New Riders. 

Damasio, Antonio 2004. Emotions and Feelings: a Neurobiological Perspective. Feelings and Emotions, The Amsterdam Symposium. 

Spillers, Frank 2004. Emotion as Cognitive Artifact and the Design Implications for Products That Are Perceived As Plearurable. Design and Emotion.

Responsive Design in a Nutshell

One of our forthcoming tasks is to create an application that works on multiple platforms. Our aim is to create suitable design for our app so it can be operated smoothly on laptops, pc´s, smartphones and other touch screen devices. We also have to remember the basic laws of web design and UI design. 

What is Responsive Design?

Responsive design is a web design approach aimed at crafting sites to provide an optimal viewing experience from desktop computer monitors to mobile phones.

 

BBC hits the age of Responsive Design.
http://thenextweb.com/dd/2013/01/13/30-new-inspiring-responsive-design-websites/2/

Elements of responsive web design

A responsive web site uses CSS3 media queries, an extension on the @media rule, to adapt the layout to the viewing environment. Plus fluid proportion-based grids and flexible images.

• Media queries allow the page to use different CSS style rules based on the device.
• The fluid grid concept calls for page element sizing to be in relative unites like percentages or EMs, rather than absolute units like pixels or points.
• Flexible images are also sized in relative units (up to 100%).

Creating and updating multiple parallel web sites or apps is laborious and impractical. Responsive web design means that “website should have the technology to automatically respond to the user´s preferences”. In this case one good design is enough!

resources&inspiration: 
 
Responsive Web Design: What It is and How To Use It (Smashing Magazine)
url: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/#more-75660

Design Guidelines and Tutorials
url: 
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/

Showcases of Responsive Web Design


http://artequalswork.com/
http://blog.teamtreehouse.com/
http://informationarchitects.net/

http://en.wikipedia.org/wiki/Responsive_web_design

Bechmarking

The second part of the Dynamic Visualization course started last Thursday, and our task was to do some well-structured benchmarking. We had been looking into other similar apps and services already during the fall's course, but perhaps not in such a systematic way. What we found already then was that none of the environmental apps we looked into were that engaging or well designed and that most geo-location based apps we found were pretty similar: based on google maps with some pins and additional layers.

The main points of benchmarking were to find concrete ideas we could use, and to learn from others' mistakes. Below are some of or findings regarding a few services we looked into in more detail.

1) Wanderlust: Good traces of the most famous trips in history

What's good here:

• First impression was very promising. The layout and Look&Feel gave a promise of good quality content and meaningful interaction. 
• When studying the titles of the content user gets a feeling of comprehensive and versatile content. 
• The design itself is appealing and suitable for the content
• The design of the map is nice and clean and could work also in mobile devices. 

What we must avoid:

• Poor and clumsy interaction
• The map is not really dynamic part of the user interface, it is just illustration with minimum amount of functions. The map does not work as an interface.
• The journeys are not interactive in a dynamic sense: The user can select a journey from the list and then follow the given narration. The content of the journey is still images and text. 
• There is no visible timeline or visual cues how time passes by -- you can find some years in the text but time is not navigational element. 
• Content and design inconsistency
• There is no information considering the amount of content per journey -- it varies from 2 images to n images.
• Confusing design and poor communications
• Difficult to divide which parts of the webpage are functional (ui) and which parts are graphics. 
• Do not promise too much -- you do not want to disappoint the users
• How to give a general overview of the project (app, webpage) to new users --> graphics, info text, titles --> what is this service about. 

2) The urban mediator (website / demo)

What we can use

• Closely related to our project in a way that location-based information is displayed on a map with symbols. 
• They're using open street maps, while we're planning to use google maps. Why was open street maps chosen? Is there something we don't know that makes it more suitable?
• They give people the option to view a list of the data, or the data on a map --> sort of similar to what we want to do.
• Clickable symbols open a popup screen on top of the map to display photos, comments etc. --> pop-ups won't probably work in a mobile environment, but how about tablets/dekstop?
• They have a desktop and a mobile version of it --> Should we only concentrate on mobile at this point?

What we can do better

• Design: right now the service isn't really working, and it looks outdated (at least based on the demo)
• Communications: when entering the urban mediator site, its hard to figure out to whom it is made for. Developers? The general public?
• Usability: It's not that clear what you should do when entering the site. We want to make it obvious.

3) Finally, we found a visualization example that uses gradient colors on a google map

This is not a pretty example, but it is the first one we have found that uses gradient coloring to represent data on a map. It represents how the world's population is divided across the globe, which makes it a valid example for us: it is realistic to assume that places with the most population have the largest amount of reviews, making our gradient coloring equally unevenly distributed.