User Interface Design Process Gabriel Spitz This Week
User Interface Design Process Gabriel Spitz
This Week 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
Gabriel Spitz Usability Criteria Effective interaction is determined by and measured using Usability Indicators Martijn van Welie (2001) 4
User-Interface design - Steps/Goals Understand Think What is the problem who are the users what do they do how will users work in the future Evaluate Ideas, concepts, designs Design An aesthetically pleasing and consistent interface Conceptualize the user interface and interaction
User Interface - Design Method User interviews & contextual observations Task scenarios and walkthrough Usability Assessment Graphical screen design Participatory design, Usability principles, Design patterns
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
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
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
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 Students Office workers – staff Visitors Professors Turists
Who Are the Users Students Faculty / staff Visitors Special needs
Use Environment
Use Environment Noise People Indoor/outdoor
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 Tasks Login Select Product Pay Select payment method Option to cancel Add items Summary Report Help Accessibility Change language Retrieve prodct
User Journey Major Steps of the interaction Setup Arrive Pickup Shop Complete Buy Request help
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
Usability Goals
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
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
- Slides: 46
