User Interface Design Process Gabriel Spitz

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

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

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

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

User-Interface design - Steps/Goals

User Interface - Design Method

Understand

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

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

Think

 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

Conceptualize

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)

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

Low Resolution Wireframe

Wireframes

Visual Design

 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

Visual design

Evaluate

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

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

Design of a Vending App Develop an Understanding

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.

Starting the UI Design Process

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

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

Who are the Users

Users

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

Use Environment

 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

User Tasks

User Journey SetupArriveShopBuy PickupComplete Request help Major Steps of the interaction

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

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

Usability Goals

 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

Business Goals

Business goals

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

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