1 / 23

User Interface Design Process

User Interface Design Process. Gabriel Spitz. User-Interface design Steps/ Goals. Understand who are the users and what do they do. Articulate how will users work in the future. Evaluate Ideas, concepts, designs. Design An aesthetically pleasing and consistent interface.

etana
Download Presentation

User Interface Design Process

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. User Interface Design Process Gabriel Spitz

  2. User-Interface design Steps/Goals Understandwho are the users and what do they do Articulatehow will users work in the future Evaluate Ideas, concepts, designs Design An aesthetically pleasing and consistent interface Conceptualizethe user interface and interaction

  3. User Interface Design Method User interviews & contextual observations Task scenarios and walkthrough Usability Assessment Graphical screen design Participatory design, Usability principles, Design patterns

  4. User Interface Design Deliverables User and Task Description Workflow and User journey Map DesignVerification Visual Design comps Interface and interaction Wireframes & prototypes

  5. Articulate • 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

  6. 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

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

  8. Understand– Deliverables • User Persona • User Journey Map – The set of activities and tasks users currently perform • User Experience Map User Persona User Journey Map User Experience Map

  9. Interaction Hierarchy Activities Tasks Steps UI Components

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

  11. 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

  12. 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 Interface and InteractionWireframes Navigation Map

  13. Use Stories Table (Task Identification)

  14. Low Resolution Wireframe

  15. Wireframes

  16. 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

  17. 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

  18. 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 User Guidance Visual Design

  19. Visual design

  20. 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

  21. 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

  22. Evaluate – Deliverables • Test results • Proposed areas in need for improvements • Rational and prioritization for proposed change Usability Assessment Report

  23. Initial Implementation

More Related