the theory of great ux/ui design

23
www.hgsinteracti ve.com The theory of great UX Design

Upload: sachin-karweer

Post on 12-Apr-2017

242 views

Category:

Design


1 download

TRANSCRIPT

Page 1: The theory of great UX/UI Design

www.hgsinteractive.com

The theory of great UX Design

Page 2: The theory of great UX/UI Design

x

The UX process begins with strategy and goes on till the testing phase. Let us take you through each stage in detail.

Page 3: The theory of great UX/UI Design

www.hgsinteractive.com

Strategy

Page 4: The theory of great UX/UI Design

x

1. Design Strategy

Strategizing is important from the outset of the project because it articulates the brand, guiding principles, and long-term vision of the organization. The strategy underpinning a UX project will shape the goals of the project—what the organization is hoping to achieve with the project, how its success should be measured, and what priority it should have in the grand scheme of things.

Page 5: The theory of great UX/UI Design

x

1. Design Strategy

Technique What it is When we use it

Competitor Analysis Performing an audit/review of competing websites and apps; conducting user testing of competing sites; writing a report that summarizes the competitive landscape.

Strategy, Research

Stakeholder Interviews Conversations with the key contacts in the client organization funding, selling, or driving the product.

Strategy, Research

Page 6: The theory of great UX/UI Design

www.hgsinteractive.com

Research

Page 7: The theory of great UX/UI Design

x

2. Research

Often referred to as the Discovery phase, the Research phase is probably the most variable between projects. Complex projects will comprise of significant user and competitor research activities, while small startup websites may skip all research activities other than some informal interviews and a survey.

Page 8: The theory of great UX/UI Design

x

2. Research

Technique What it is When we use it

Contextual Enquiry Interviewing users in the location that use the website/app, to understand their tasks and challenges.

Research

Surveys Crafting an online survey, primarily to solicit feedback from current (or potential) users.

Research

Content Audit Reviewing and cataloguing a client’s existing repository of content.

Research

Diary Study Asking users to record their experiences and thoughts about a product or task in a journal over a set period of time.

Research

Page 9: The theory of great UX/UI Design

x

2. Research

Technique What it is When we use it

User Interviews User interviews are a key activity for understanding the tasks and motivations of the user group for whom you are designing. Interviews may be formally scheduled, or just informal chats (for instance, in a suitable location that your target demographic are present).

Research

Heuristic Review Evaluating a website or app and documenting usability flaws and other areas for improvement.

Research, Analysis

User Testing Sitting users in front of your website or app and asking them to perform tasks, and to think out loud while doing so.

Research, Analysis, Design, Production

Personas A persona is a fictitious identity that reflects one of the user groups for who you are designing.

Analysis

A/B Testing Good for testing new or experimental features before releasing them to all customers.

Design,Research

Page 10: The theory of great UX/UI Design

www.hgsinteractive.com

Analysis

Page 11: The theory of great UX/UI Design

x

3. Analysis

Aim of the Analysis phase is to draw insights from data collected during the Research phase. Capturing, organizing and making inferences from the “what” can help UX Designers begin to understand the “why”. Communicating the designer’s understanding back to the end-users helps to confirm that any assumptions being made are valid.

Page 12: The theory of great UX/UI Design

x

3. AnalysisTechnique What it is When we use

it

Use Cases A use case is a list of steps that define the interactions between a user and a system. Use cases, especially when used as requirements for software development, are often constructed in UML, with defined actors and roles.

Analysis

Storyboards A storyboard is a tool inspired by the filmmaking industry, where a visual sequence of events is used to capture a user’s interactions with a product. Depending on the audience, it may be an extremely rough sketch, purely for crystallizing your own ideas.

Sometimes it can be useful to create a slightly more polished version of this—a comic—to communicate the sequence of events to key stakeholders, in order to achieve buy-in for a concept.

Analysis

Affinity Diagramming

A business technique for identifying and grouping patterns within unrelated data. Analysis

Personas A persona is a fictitious identity that reflects one of the user groups for whom you are designing Analysis

Scenarios A scenario is a narrative describing “a day in the life of” one of your personas, and probably includes how your website or app fits into their lives.

Analysis

Page 13: The theory of great UX/UI Design

x

3. AnalysisTechnique What it is When we

use it

Mental Models

A mental model diagram is a fishbone or horizon diagram where the top towers represent individuals' motivations, emotions, and stories related to their experience in achieving a particular goal, regardless of the tools they use. The top part of the diagram is person-focused, not solution-focused. The bottom towers of the diagram represent the features of your organization's offerings, aligned beneath the appropriate upper towers that they support the best. You can see where your organization's design and business requirements support people's goals well and where they need improvement. The diagram as a whole is generative, not evaluative, helping your organization realize weaknesses and gaps in the way you support people and adapt existing products, services, or processes to particular behavioral audiences or situations.

Analysis

Experience Map

An experience map, or customer journey map, is an extended version of a mental model. Rather than looking at one moment in time for a single user, an experience map is a holistic, visual representation of your users’ interactions with your organization when zoomed right out.

Because many organizations and the projects within them are large and complex, an experience map is usually captured on a large canvas—a necessarily big poster that you can zoom in or out of to explore the details.

Analysis

Card Sorting Card sorting is a technique where users are asked to generate a folksonomy, or information hierarchy, which can then form the basis of an information architecture or website navigation menu.

Analysis

Page 14: The theory of great UX/UI Design

www.hgsinteractive.com

Design

Page 15: The theory of great UX/UI Design

x

4. Design

Design phase of a UX project is extremely collaborative (involving input and ideas from different people) and iterative (meaning that it cycles back upon itself to validate ideas and assumptions). Building on the user feedback loop established in previous phases, the premise of the Design phase is to put ideas in front of users, get their feedback, refine them, and repeat. These ideas may be represented by paper prototypes, interactive wireframes, or semi-functioning prototypes, all deliberately created in low-fidelity to delay any conversation relating to graphic identity, branding or visual details.

Page 16: The theory of great UX/UI Design

x

4. Design

Technique What it is When we use it

Collaborative Design

Inviting input from users, stakeholders, and other project members. Design

Workflow Diagram

A workflow diagram (or activity diagram) is a graphical representation of activities and actions conducted by users of a system.

Design

Sitemap A sitemap is a complete list of all pages available on a website. Design

Wireframe A wireframe is a rough guide for the layout of a website or app. A prototype is similar in that while far from being a polished product in terms of visuals or functionality, it gives an indication of the direction that the product is heading. “Mockups” is the term I use for wireframes that have been created in high fidelity, but for some people these three terms are interchangeable.

Design

Page 17: The theory of great UX/UI Design

x

4. Design

Technique What it is When we use it

Paper Prototype

Paper prototyping is the process of creating rough, often hand-sketched, drawings of a user interface, and using them in a usability test to gather feedback. Participants point to locations on the page that they would click, and screens are manually presented to the user based on the interactions they indicate.

Design

Mood Board A mood board is a collage, either physical or digital, which is intended to communicate the visual style a direction is heading (or should be heading). Stakeholders may use a mood board to provide a visual designer with the atmosphere they would like their site to convey and the colour palette to explore.

Design

A/B Testing Good for testing new or experimental features before releasing them to all customers. Design,Research

Page 18: The theory of great UX/UI Design

www.hgsinteractive.com

Production

Page 19: The theory of great UX/UI Design

x

5. Production

The Production phase is where the design is fleshed out, content and digital assets are created, and a high-fidelity version of the product is validated with stakeholders and end-users through user testing sessions. The role of the UX Designer shifts from creating and validating ideas to collaborating with designers & developers to guide the project to ensure everything is on the right track.

Page 20: The theory of great UX/UI Design

x

5. Production

Technique What it is When we use it

Beta Launch Releasing a closed beta release of your product involves allowing only a select group of users to use the software and provide feedback before it becomes available to the wider public.

Design, Production

Page 21: The theory of great UX/UI Design

www.hgsinteractive.com

Usability Testing

Page 22: The theory of great UX/UI Design

x

6. Usability Testing

Usability testing refers to evaluating a product or service by testing it with representative users. Typically, during a test, participants will try to complete typical tasks while observers watch, listen and takes notes. The goal is to identify any usability problems, collect qualitative and quantitative data and determine the participant's satisfaction with the product.

Page 23: The theory of great UX/UI Design

xThank you