• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ux Meets Code Interaction Usability

Ux Meets Code Interaction Usability



Slides from the Interaction Design and Usability day at the UX Meets Code track in Barcelona, Spain 4-6 December 2009

Slides from the Interaction Design and Usability day at the UX Meets Code track in Barcelona, Spain 4-6 December 2009



Total Views
Views on SlideShare
Embed Views



1 Embed 4

http://www.slideshare.net 4



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Ux Meets Code Interaction Usability Ux Meets Code Interaction Usability Presentation Transcript

    • Interaction Design
    • Contents • Interaction design •  Designing for Maemo •  How to do design •  Tips • Usability evaluations •  What, why, how 2
    • Design the Interaction Interaction is about the flow (and wow) related to 1.  User’s perception of what is on the User interface •  Hardware and software UI •  Content and UI controls 2.  User’s inputs to the system (or application) •  HW / SW, stylus, touch screen, navi-key, keyboard,... 3.  User’s perception of what the system is doing •  System logic, background processes, ... 4.  User’s perception of the system outputs •  System feedback: progress bars, notifications,... •  And so we get back to step 1... 3
    • Interaction design in Maemo • Check the technology constraints on Maemo device •  Screen size •  Screen orientation •  Touch or keyboard based input, or both • Are you developing a mobile application or a mobile web site? • Will the application be for business or passing time? 4
    • Use platform style & components • Check the available components and how to use them in Maemo •  Hildon 2.2 UI Style Guide •  Hildon 2.2 Widget UI Specification •  Fremantle Master Layout Guide •  Maemo 5 Desktop Widget UI Guidelines • Develop your own UI-components only when there’s no alternative 5
    • Design the structure •  Document it as a navigation map of the application’s views Note: Ideally this is already a part of the application’s UI concept. Task flow should utilize the views/services of other applications, when available. Design it accordingly. Navigation map of an imaginary Contacts application. 6
    • Detail each individual view •  Do design separately for each view •  Don’t forget the consistency •  What is the set of information that fulfills the user’s needs and nothing more? •  Is there any functions that needs to work in the view? •  Will there be some events that take place in the view? 7
    • Touch interaction • Specify the touch interaction •  Area •  Direction •  Gestures • Maemo touch interaction •  Short press (“tap”) •  Long press •  Flick •  Pan 8
    • Less is more especially on mobile UIs. •  Prioritisation of view items (data, features) is crucial •  What is the core idea of your application? •  How often the user’s use the feature? •  The screen in Maemo device is still quite small •  A crowded view is usually hard to understand •  outline the main purpose of the view •  Understand what is the “playground” of the application, and respect the common/global area •  Favor direct interaction 9
    • Keep it simple • Minimize need for settings •  Don’t still remove them • Reduce the need for confirmations •  Don’t forget the undo • Can the information be saved automatically? • Reduce the amount of other notes too •  Don’t forget to tell the user what’s happening 10
    • Graphic designer role •  Normally, the user interaction sketch pictures are drawn in wireframe level, not with the final graphics •  Graphic designers should evaluate the wireframes •  Especially the layout (=object sizes and margins) •  It is important to have the interaction designer and graphic designer work closely together Interaction Design + Graphical Design = Final UI 11
    • Design reviews •  End users should be involved at every stage of the development •  Use paper prototypes before starting to implement the application or service. •  Work iteratively •  Start from big picture and continue to smaller details. •  After each iteration involve real users. •  Remember to check you haven’t forgotten the initial vision from concepting or benchmarking. Design Evaluate 12
    • Design sketches • Hand drawn sketches •  Quick reviews •  Encourage experimentation and honest critique • Annotated wireframes •  Describe the functional elements •  Elements are explained •  Annotations enables the wireframe to be understood • High fidelity wireframes •  Includes images, colors, fonts well thought The line between high fidelity wireframe and functional prototype is a thin one. 13
    • Balance between details and big picture • The flow is the most important aspect of interaction design. •  Main use cases needs to be fluently executable – how many steps are there? • Small details have huge impact on user experience. •  Terms, localization, colors, aesthetic… • Most of the users try to use the devices “the right way” •  Only small amount of people will try to intentionally misuse the application •  Don’t waste time for corner cases. • Agree the level of detail done in the interaction design phase. 14
    • Most important tip of all • Remember that the Maemo device is a phone. • What happens to your application when someone calls to the phone call? • Is the still user able to check messages when they’re using your app? • Is the user easily able to switch to phone functionalities from your application? 15
    • Some Mobile UI Guidelines Guidelines Links Forum Nokia http://www.forum.nokia.com/ (Maemo) Tools_Docs_and_Code/Documentation/ Maemo.xhtml dotMobi Mobile Web http://mobiforge.com/designing/blog/ Developers Guide web-developers-guide-released 16
    • Sources for UI Design patterns • General UI design patterns can simply be called "best practices". They are the pure version of user interface design patterns, and apply to a wide variety of applications and across platforms. • Example sources of general UI design patterns include •  http://wiki.forum.nokia.com/index.php/Category:Mobile_Design_Patterns ‘Design patterns’ •  http://www.usability.gov/pdfs/guidelines.html ‘Research Based Guidelines’ •  http://www.welie.com ‘Patterns in Interaction Design’ •  http://designinginterfaces.com/ ‘Patterns by Jenifer Tidwell’ •  http://ui-patterns.com ‘Patterns by Anders Toxboe’ •  http://patterntap.com ‘Pattern Tap’ •  http://quince.infragistics.com/ ‘UX Patterns Explorer’ • Note: web-links are subject to change at any given minute… 17
    • Usability Evaluation
    • Usability evaluations • The evaluations can be done in any phase of the product. • The evaluations always base on the target user groups and their needs. • Evaluations give second opinions about the product. • Testing normally concentrates on finding software bugs. •  Those have huge impact on usability as well. •  The usability can also be tested or evaluated to get better products. 19
    • UX Evaluation Method examples SAY DO (USE) •  Interviews •  Usability testing •  Focus groups •  Observation •  Surveys •  Shadowing •  Contextual interviews •  Participatory observation •  Artifact interviews •  Contextual inquiry •  Field testing MAKE •  Betalabs •  Participatory design •  Mood boards •  Moving with magic thing diary •  Probes 20
    • UX Evaluation: Make a mix • An expert evaluation and a usability test can be used as complementary methods • An expert evaluation require less time and preparation than a usability test • Expert evaluations are recommended before usability tests in order to support designing the test tasks • A satisfaction questionnaire can be combined with a usability test 21
    • What do you need for usability study? • Usually usability studies are done by professionals. • Developers can still use for example heuristics evaluations •  The heuristics can also be used as design guidelines. •  Now a days there’s also mobile heuristics which can be used instead of Nielsen’s original heuristics. • Forum Nokia also offers a User Experience Evaluation Model for you to use when checking your application against heuristics. • If you want experts to do it, then purchase an evaluation for your app at forum.nokia.com/ux. 22
    • For more information •  Design of Everyday Things, Donald Norman (1990) ISBN 0-262-64037-6 •  Emotional Design, Donald Norman, (2004) ISBN 0-465-05136-7 •  Usability Engineering, Jakob Nielsen (1994) ISBN 0-125-18406-9 •  Web Browsing on Mobile Phones - Characteristics of User Experience. Virpi Roto, Doctoral dissertation, TKK Dissertations 49, Helsinki University of Technology, Finland (2006) ISBN 951-22-8469-3 •  User Experience Elements and Brand Promise Virpi Roto, V, Rautava, M.:. International Engagability & Design Conference (Idec4), in conjunction with NordiCHI’08 conference. October 19, 2008, Lund, Sweden (2008) •  http://research.nokia.com/files/UXelements-v2.pdf •  User Experience from Product Creation Perspective. Virpi Roto, Towards a UX Manifesto workshop, in conjunction with HCI 2007, Lancaster, UK. (2007) •  Usability Inspection Methods, chapter Heuristic evaluation, Jakob Nielsen (1994b) ISBN 0-471-01877-5 •  Usability testing of mobile services and applications – benefits and drawbacks of lab and field study. Kaikkonen, A, Kekäläinen, A., Cancar, M., Kallio, T., Kankainen, A. (2008).. In Lumsden, J., (Ed.) Handbook of Research on User Interface Design and Evaluation for Mobile Technology. Information Science Reference, 897-909 23
    • Creative Commons - disclaimer UX Driven Development For Mobile SW Developers by Forum Nokia is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License 24
    • forum.nokia.com/ux • 25