1. User Interface Design Process Gabriel Spitz

2. Today  Understand the User Interface Design process  Gather info for designing a user interface for a vending machine  Design the Interface

3. Why a Design Process?  Help focus us on Usability Criteria  Ensure a systematic approach to the design effort  Minimize rework

4. Usability Criteria Gabriel Spitz 4  Effective interaction is determined by and measured using Usability Indicators Martijn van Welie (2001)

5. Usability Design Principles  Clarity -to avoid ambiguity. Through language, hierarchy, flow, visuals  Concision -to make interaction efficient  Familiarity - to facilitate recall and use (to reduce anxiety with new)  Responsiveness (not sluggish) - Speed and feedback  Consistency - across applications to facilitate performance  Aesthetic - to make it enjoyable when in use  Efficiency - to help user be more productive  Forgiveness

6. User-Interface design - Steps/Goals

7. User Interface - Design Method

8. Understand

9. Understand – Objectives  Build an understanding of the design problem  Identify the business problem that we intend to solve  Describe the users; what are their characteristics, likes, dislikes, goals and needs  Describe how and where we expect users to use the product/application

10. Understand– Methods  Meet with Product team and identify the design problem, scope, and goals of the product  Meet actual and/or virtual users to figure out who they are, what they do, how do they do it today and what are their key needs  Identify Perform a competitive analysis of similar products or solutions to identify trends and benchmark what is out there

11. Think

12.  While I call out “Thinking” as a separate step, it is often integrated with the Conceptualized step  Design  Think and Think  Design  We use images to stimulate and guide thinking and we use thinking to guide the design

13. Conceptualize

14. Conceptualize – Objective  Build a clear and shared vision of the product or application we want to build  Depict how the user interface will appear to users  Help ensure that key user tasks are accounted for-generate additional use stories and modify the design  Select and wireframe the most suitable design ( one that meets most of the requirements)

15. Conceptualize – Deliverables  Establish an overall conceptual model and sketches of the solution – the overall pattern, interaction style, metaphors  Create Task Model to describe the interaction  Create Page-wireframes to describe the interface (dialogue) concept  Create and review Application-wireframe to tie the interaction and interface design together within the context of user intention  Add new use stories, if needed, to ensure effective and comprehensive design

16. Low Resolution Wireframe

17. Wireframes

18. Visual Design

19.  Create a compliant and aesthetically pleasing rendering of the application wireframes  Ensure clarity and simplicity at the user interface  Help new users quickly master product usage by adding guidance and instruction where needed

20. Visual design

21. Evaluate

22.  Provide constructive and actionable input to specific design questions/issues  Continuously verify proposed design solutions  Ensure usability both at the micro and macro level

23. Evaluate - Methods/How  Utilizing a mix of evaluation methods including:  User interviews  Local and remote usability tests  A/B testing compering design alternatives  On-line surveys

24. Design of a Vending App Develop an Understanding

26. Design Problem  Many Vending Machine Banks around campus serving a variety of products  Currently most of these machines require “Cash on Delivery”  In the future these machines will be able to communicate with a user via smart phones or tablet computers.  Our goal - build a tablet based user interface to shop at these vending machines.

27. Starting the UI Design Process

28. Requirements - before we Design  Users  Payment details  Set of products  Functionality  Advantages/Disadvantages  Platform - Hardware

29. Developing an Understanding  Who are the Users  Where will this application be used Environment  What Tasks will this application need to support  What are the Usability Goals which will make this application successful from a user perspective  What will make this application a business success - Business goals

30. Who are the Users

31. Users

32. Who Are the Users  Students  Faculty / staff  Visitors  Special needs

33. Use Environment

35.  Hall ways and lounges  Often noisy with lots of people talking and laughing  People come, go, stand  Some people might be embarrassed about what they buy  Several individuals might wait in line for vending machine

36. User Tasks

38. User Journey SetupArriveShopBuy PickupComplete Request help Major Steps of the interaction

39. User Tasks (1/2)  After purchasing the App  Setup app – Personal/financial info  When arriving to the Vending area  System Locate application – Like finding a network on the lap top  User sign in - passcode  Ready to shop  Browse available items – Orientation and promotions  View Favorites – system will build up based on repeated purchases  Locate candidate item  Categories  Price  Names + Images  Search for a specific item  Interrogate system to obtain additional item info  View cart status – items, cost  Select item

40. User Tasks (2/2)  Ready to buy  Review cart status  Edit cart content  Buy  Ready to pickup items  Be directed to the specific vending machine that contain my items  Close transaction  Opportunity for feedback  Auto close

41. Usability Goals

43.  Promote user trust  About personal info  About fiscal info  Minimal data input  Amount of data  Number of steps  Support decision making  Possibly show items I bought in the past  Provide relevant info for decision making – e.g., dietary, allergic  Keep user in control  Ability to add delete  Feedback about item status, cost

44. Business Goals

45. Business goals

46.  Sell products  Minimize cart abandonment  Increase average cart value  Build long term relationship with customers – Return customers  Obtain payment  Engender trust  Minimal support needs

47. Other Potential Requirements  Localization  Multiple languages  Different currencies  Accessibility by individuals with special needs  Online help  For first time users  For issues  How to contact us