1. User Interface Design Process Lecture # 6

2. CS 615 - Structure  Understand the User Interface  Design the User Interface  Evaluate the User 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. User-Interface design - Steps/Goals

6. User Interface - Design Met hod

7. User Interface - Design Deliver ables

8. Understand – Objectives  Build an understanding of the design problem and Requirements  Business problem – To identify what we are trying to solve  User Characteristics - What are they like, what do they want, try to avoid, goals and needs  Use Environment - Where will users use the product/application

9. Understand– Methods  Interview Product Manager - To identify the design problem, scope, and goals of the product  Interview Users – To figure out who they are, what they do, how do they do it today and what are their key needs  Perform a competitive analysis - To identify trends and benchmark what is out there

10. Understand– Deliverables  Requirements Document – What is needed  User Persona – Characteristics and demographics of our users  User Journey Map – The set of activities and tasks users currently perform User Persona User Journey Map

11. Articulate  Envision the Future – How will people use our application or product  While I call out “Articulate” 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

12. 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)

13. Conceptualize – Deliverables  Conceptual model and sketches - of the solution – the overall pattern, interaction style, metaphors  Task Model – That describe the interaction  Wireframe – That describes the interface (dialogue) concept at the page level  Application-wireframe – That 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

14. Conceptualize – Deliverables  Task flow model  Application level – Sketches and Wireframe describing in detail; Navigation, structure of each interface component, and the expected interaction within the context of specific user intentions Task Flow Model Navigation Map Interface and Interaction Wireframes

15. Use Story Table (Task Identification)

16. Low Resolution Wireframe

17. Wireframes

18. Design – Objective/Why  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

19. Design – Methods  Review research and conceptual design to understand goals, intent, and proposed design  Skin each wireframe component to comply with corporate guidelines  Identify and design special components required by the design – e.g., icons, special labels, highlight colors, etc.  Review the visuals with UX and Documentation

20. Design – Deliverables  Clear, aesthetic and pixel perfect visual design  Implementation guidance and specific components (such as icons) to support front end developers  User guides, help documentation and training Visual Design User Guidance

21. Visual design

22. Evaluate - Objective/Why  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. Evaluate – Deliverables  Test results  Proposed areas in need for improvements  Rational and prioritization for proposed change Usability Assessment Report

25. Initial Implementation