Archive | October 2013

Donald Norman’s Design Principles

Image

Donald Norman claims that great design are based on all these categorize features which aimed the user’s behaviour, creating the best solutions.

Visibility – Refers to the basic functions of the system or product where easy enough for users to understand and use. All performance aspects of the product or system should be relatively obvious to the user. The functions should be evident just be looking at the device so the user can easily find out what to do next.

Feedback – Refers to some immediate and obvious kind of signal while using the product or system. These signals to inform user there was a response or a result, then allowing the person to continue with the activity. Sending back information about what action has been done and what has been accomplished. Various kinds of feedback are available, could be audio or visual cues or something that is obvious. The response must also make sense and let the user know if what they done.

Constraints – Refers to restricting the kind of user interaction, stopping users from taking certain actions that are not suppose to be taken with certain devices or take place at a given moment. There are various ways this can be achieved, such as physical, semantic, logical, and cultural constraints.

Mapping – Refers to the relationship on how the product is used and displayed. There should be a relation between actions and intentions on using all the product or system. A good mapping resulting ease of use of a system or product to the users.

Consistency – Refers to designing in similar ways and elements while achieve something. Users to ‘get used to a product or system’ and therefore once they learn how to use it, they can continue to use it because given actions produce the same results so it is consistent every time.

Affordance – Refer to an attribute of an object that allows users to know how to use or operate. To afford means “to give a clue” (Norman, 1988). When there are affordances of a physical object, it is easy for users to know how to interact with it.

Image

Referring to Donald.A Norman’s ‘The Design of Everyday Things’ (2002)

Facts of User Experience

Peter Morville’s User Experience Honeycomb

User experience (abbreviated as UX) is how a person feels when interfacing with a system. The system could be a website, a web application or desktop software and, in modern contexts, is generally denoted by some form of human-computer interaction (HCI).

Here’s how Peter Morville explain each facet or quality of the user experience:

  • Useful. As practitioners, we can’t be content to paint within the lines drawn by managers. We must have the courage and creativity to ask whether our products and systems are useful, and to apply our deep knowledge of craft and medium to define innovative solutions that are more useful.
  • Usable. Ease of use remains vital, and yet the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of web design. In short, usability is necessary but not sufficient.
  • Desirable. Our quest for efficiency must be tempered by an appreciation for the power and value of image, identity, brand, and other elements of emotional design.
  • Findable. We must strive to design navigable web sites and locatable objects, so users can find what they need.
  • Accessible. Just as our buildings have elevators and ramps, our web sites should be accessible to people with disabilities (more than 10% of the population). Today, it’s good business and the ethical thing to do. Eventually, it will become the law.
  • Credible. Thanks to the Web Credibility Project, we’re beginning to understand the design elements that influence whether users trust and believe what we tell them.
  • Valuable. Our sites must deliver value to our sponsors. For non-profits, the user experience must advance the mission. With for-profits, it must contribute to the bottom line and improve customer satisfaction.

I found this diagram is very useful whenever designers want to design something like web, applications or whatever have to consider for their users. Based on this diagram, there are 7 facets of user experience that designers may refer to. All these facets are necessary to create great user experience to a product, web or app. Design a product that is useful, usable, desirable, findable, accessible, credible and valuable. With having all these 7 facets, the product would be outstanding from the others and with great user experience, raise the chances that user may recommend to their friends and come back again.

 

UX Best Practices for Designing Mobile Apps by Marcos Moralez

Marcos Moralez is an Emmy Award winning UI Designer with over 13 years of experience. He is the founder of Micro-Startups.com, an Idea lab built on Lean & UX principles.

He describe that after he had designing user experience for mobile experience for a couple years, he had learned to pay attention to the details. Thus, he had compiled a list to enhance the UX on mobile apps and published at Micro-Startups.com.

Context:
Each context requires slightly different design goals.

Bored – Social, News, Entertainment (Has time to kill)
Busy – Email, Calendar, Banking (Optimize for micro-tasks and getting things done easily)
Lost – Attractions, Directions, Recommendations (geo maps yelp: connectivity and battery are important)

All applications are not created with the same goal in mind, and shouldn’t be designed that way. That being said these are some of the key guidelines that all apps should follow, regardless of context.

Affordances:
The visual clues the design aspect of an object that will suggest how the object should be used (visual clue to its function). Be sure to include affordance for gestures. Provide visual feedback for every user interaction when user clicks something.

Responsiveness:
This is critical. Having to wait for data is not acceptable for mobile apps, users are on the go and have less time and attention than if they were on a desktop.

Thumbs/Fingers:
Users are more likely to be using one hand. The primary actions (targets) should be easy to reach with the thumb. The target size should be large enough to hit with minimal error. They have enough breathing room so that they don’t accidentally click wrong targets (if they must be close to the other targets make sure that its easily reversible e.g. just click to back to the previous tab versus deleting a message you were about to send.)

Screen Real Estate:
Because there is limited space on the screen you should remove unnecessary buttons and labels.

App Control Placement:
Controls at the top of the screen versus at the bottom, e.g. instagram, maps. Controls for the app should be at the bottom of the screen versus the top. When the Control is at the top (google maps, Apple maps) when you need to edit update your hand is in the way.

Use the Proper Navigation Model:
Apps currently use 3 types of nav models

None – Single screen apps, Calculator app
Tab Bar – Different areas in the app without a clear data hierarchy, almost like different modes where they don’t have any true relationship to the other tabs.
Drill-down nav – List + detailed content hierarchy, (settings on the iPhone)

Things to Avoid:
– Autocorrect in form-fields!
– Avoid making the user type a lot of information (if you can’t avoid it, support landscape view. This makes the typing much less painful)
– Avoid modal alerts as much as possible. (Its okay if you’re using it as a confirmation to a potential hazardous action e.g. deleting a user account, message)
– Avoid excessive alerts and badges (if you use badges make sure they are accurate)

Designing Your Application:
Polish: Professional design is valuable more so on mobile than desktops due to the personal relationship to the phone. Applications can be used anywhere at anytime, making the application visually appealing can help with adoption.

Icons:
Your Icon is your business card, if defines you. I have a strong opinion about the need to have a well designed icon that also somewhat represents what your app does.

Planning:
Map out user personas: How is are target audience going to use the app, and with mobile you want to ask “where are they going to be using it”

LoFi Wireframe prototype:
Using wireframe tools you can replicate interaction and user flow through the app. This will help uncover potential problems, target size, font size etc.

Feedback Loop:
Get Feedback from real users. Ask about expectations for the interface (what the user expects to happen after they click xy button.) If affordances are used correctly (icons, label) the expectation should align with what will happen.

Track Data:
Using services like Apsalar and Mixpanel, you can uncover problems, as well as track how users are interacting within the app. Determining the most popular thing areas of your app can help with planning future iterations.

All these points are really useful and referable. Mobile applications now continue to proliferate. But the quality of mobile user experiences ranges are dropping. Choosing the best development tools doesn’t guarantee the great user experience. However, to design a great app with good user experience have to consider the user behaviours, useful, usable and desirable.

Six Design Patterns for Highly Successful Mobile Apps by Apigee

Rod Simpson, from Apigee had published 6 design patterns that could be great start for mobile applications. These 6 design patterns will help mobile developers aiming highly successful mobile apps. 

 

1. User Management

One of the most fundamental needs of app developers. It is use to handle users’ or customers’ accessibilities, groups, roles, subscriptions, upgrades, reminders, and etc. Internet ID and social connectivity also relate to user management. Developers are being rewarded for building identity into apps – from showing pictures of users to bridging to other identities like Twitter and Facebook.

2. Connected & Social Interactions

This is where an app connected to the social and it might notify or invite a user to join. Development platforms that provide activity streams, linked profiles, and so on facilitate the development of connected and social interactions.

3. Activity Streams

Activity streams are a kind of static query on moving data. They take connections and turn them into activities, adding a social layer to data and opening up real-time collaboration. Activity streams include of activities such as status updates, check-ins, comments and etc.

4. Sync Content & Data

Apps need to be able to share data with users, and import, export, and sync application data with third-party applications. The ability to sync data across devices allows developers to create apps, which provide consistency of experience. Think about your favorite “shopping list” or “to do” app that syncs across laptop,  iPad, and of course mobile phone.

5. Location, location, location

Geo-location or Location-Based Service (LBS) apps attach real-world locations to mobile devices and are one of the fastest growing types of apps. The users can establish when and where receive information, track their friends and family in real-time by location and proximity, find and provide information about things and people around you.

6. Analytics

App developers need to be able to monitor usage and analyze data to drive both app functionality and business intelligence. Important services include real-time activity processing, behavior tracking and targeting. Analytics on individual apps are powerful and useful for decision-making about functionality, usage, troubleshooting problems, and etc.

 

Among these 6 design patterns, i found out that some of them are similar to the other articles that i read before. It making sense that these few design patterns are meant something to all the other app developers that designing user experience for mobile applications and referable. 

 

Key Patterns for Mobile Apps by Apigee

This is a webcast do introduce some key patterns for mobile app development. The webcast covered subject:

  • Identity
  • Show what’s happening
  • Show what’s nearby
  • Alert me!
  • Share info or state across devices
  • Access a service remotely

 

 

They described the design pattern used by each different subjects and how user react with with these subjects. All these use case are kind of familiar as almost all of them are used in today’s mobile application. For example, Facebook, Foursquare, Twitter and so on. All these patterns directly or indirectly affect the user experience as every different people have different point of view.

For example, Facebook had now with function of “seen” in message, where some people found it’s great where showing the people they contacted had read their message. Where as, some people may found it not so great, where they accidentally pressed the message but they are not reading, end up the other side of user blaming that they have read the message yet not replying.

Facebook often update with their functions and interface to enhance the user experience. However, some users may not find it useful and not acceptable. It would be great if Facebook would do survey the user behaviour or user preferences before they made changes to the current version.

Usable Interfaces for Tiny Places by Apigee

I have recently found an interesting podcast that talks about the best practices in Mobile Application Design. The subject for the sound clip is Usable Interfaces for Tiny Places. Apigee by API company are making digital business which help customers to grow with mobile apps, create new products, accelerate internal development through APIs, and gain end-to-end visibility into business with the ability to analyze 360 degrees of information. Besides, Apigee do help companies to innovate through APIs, re-imagine their businesses, address the global explosion of mobility and lead the way in the app economy.

Apigee’s API platform also provide a site for us to view their API best practices, where about the design, strategy and technology resources.

“With a virtual gold-rush in mobile app development, the race is on to create powerful apps but also the most compelling user experiences. Designing for a touch interface and a small profile is a unique proposition and lessons learned from web or desktop app development will go only so far.” by Helen Whelan

Jeremy Anticouni of Ignite Mobile Studio and Nima Vadiee from Apigee had discussed some design principles that all mobile app developers should consider and adhere to during the podcast. They had covered subjects of:

  • The importance of prototyping and wire framing
  • Crafting intuitive, simple, and visually appealing user interfaces
  • Designing usable interfaces for tiny spaces
  • Perception vs. performance within the user experience

Wireframing definitely saving time in the design process had summarised all the functionalities and important points to be brought out. Always put our mind to “Less is more”, simplify everything to be easy manageable and straight forward. On the other hand, uses of the space just great looking and help to highlight the important ones from the others. Meanwhile, the perceived performance of an application directly affects the user experience. Network conditions, device type and processing power all these could affect the performance of an app. In this case, provide user another simple version on viewing the application, a loading indicators, using simple coding could give better perception of performance, even when it’s out of control.

The information are definitely useful to my research also giving me some great ideas and advices on how to develop a better user experience mobile application in future. Beside of having great visuals in the application, developer should also consider the user experience for their customers. Its is definitely different point of view when the designer or developer stand on the customer’s view while using the application and experience themselves to improve and enhance the usability of the application.