ux ui foundations - conygreneueda.conygre.com/citi/content/enterprise/ux.pdf · platform for...

50
11 UX UI Foundations 22 Lean UX DD-05-UIDESGN User Experience 1 / 50

Upload: others

Post on 21-Jul-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

1 1

UX UI Foundations

2 2

Lean UX

DD-05-UIDESGN

User Experience

1 / 50

Page 2: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

3

What is Lean UXTo understand Lean UX we need to be clear on what Lean is and what UX isWhat is Lean?

– Lean is the maximization of business value whilst eliminating waste

In the context of UX, Lean UX looks to minimize waste and focus on creating value for the business

– The focus is adding value, not simply creating good designs

DD-05-UIDESGN

4

Lean 7 Forms of Waste

}Transport – Paper based vs EFT, routing for unnecessary approvals/processing

}Inventory – Excessive backlog to be processed, too much paper to be handled

}Motion – Walking to deliver paperwork, chasing for info, poor ergonomic design

}Waiting – Waiting for info or approval, equipment downtime, time between batches

}Over Production – Doing more than is required (reports, reviews, approvals)

}Over Processing – Unnecessary steps, hand-offs, lack of std procedures

}Defects – Errors, rework, work not meeting requirements, missing info

DD-05-UIDESGN

User Experience

2 / 50

Page 3: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

5

The Lean UX ManifestoWe are developing a way to create digital experiences that are valued by our end users. Through this work, we hold in high regard the following:

– Early customer validation over releasing products with unknown end-user value

– Collaborative design over designing on an island– Solving user problems over designing the next “cool”

feature– Measuring KPIs over undefined success metrics– Applying appropriate tools over following a rigid plan– Nimble design over heavy wireframes, comps or specs

As stated in the Agile Manifesto, “While there is value in the items on the right, we value the items on the left more.”

DD-05-UIDESGN

6

Lean UX Practitioners BehavioursLean UX Practitioners will tend to

– Seek user validation early on in the process• They don’t just put stuff out there and ‘see what happens’

– Design in team and work with many collaborators• They work with customers, domain experts, data experts• Note this is NOT the same as DESIGN BY COMMITTEE

– Measure the performance of the design objectively• By how much has sign up rate increased?• How much more are people spending?• Has the cost per acquisition (CPA) gone down and by

how much?– Use a wide variety of tools depending upon the problem– Not get too distracted with lots of documentation and design

artefacts

DD-05-UIDESGN

User Experience

3 / 50

Page 4: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

7

Project VisionAgile projects typically begin with a vision which is established using techniques such as

– Elevator statement• What you would say in the time it takes to ride 15 floors in an

elevator– Cereal box

• Take a cereal box, wrap it in paper, and as a team write on the box the key messages about your product like a cereal box has

– Press Release• Write a press release about your product as if it were already

complete• What would it say?

– Team prepared statement• As a team, come up with words and phrases that describe your

product• Write them on post it notes and then as a team pull together

the ones you prefer to make a vision statement

8

Sample Project VisionWe will be the no.1 consumer platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer base

Standard takeaway food

sucks!

Cash-rich, time-poor consumers demand quality

food + convenience

Good quality restaurants don’t deliver

“There is a great potential for non-traditional [takeaway]restaurants to reap the rewards of developing takeaway and home delivery services.”

Market Research, Euromonitor.com

User Experience

4 / 50

Page 5: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

9

We have a vision – but what now?• In Lean UX, you would typically now identify who

will use your product, and this is done through the creation of personas

1010

Personas

User Experience

5 / 50

Page 6: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

11

Using PersonasIn an ideal world, the interface of a system would be personalized specifically for you!

For your system, how will you ensure that the interface suits your users?

– Personas are example people who might use your system

– You create a set of fake users and their personal situations

– This helps you put yourself in the position of your actual users

»So a Persona is a fictional instance of our average user»The persona is used by the design team to visualize real users with real needs and motivations

DD-05-UIDESGN

12

Creating Personas}This should take place before you start writing requirements/user stories. This is one practical activity that you could adopt

}Brainstorm an Initial Set of User Roles• development team members and customer team• capture on cards (as many as possible)• don’t filter at this stage

}Organise the Initial Set• move and group cards to indicate relationships• overlap cards if relationships are overlapping

}Consolidate Roles• remove / merge duplicates• remove roles not important for project success

}Refine the Roles• capture useful information about the user

User Stories Applied – Mike Cohn

User Experience

6 / 50

Page 7: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

13

User Stories Applied – Mike Cohn

Persona Example

14User Story Mapping – Jeff Patton

Persona Creation Example

User Experience

7 / 50

Page 8: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

15

Other Example Personas

DD-05-UIDESGN

16

Persona Attributes• Basic Parameters of a User Profile

DD-05-UIDESGN

Characteristic Variable Design Implications

Health / age / gender VisionMotor skills

Font sizeColour / contrast

Education Reading levelGeneral knowledge

Training HelpWriting style

Language Writing styleAlternative versions

Computer experience Novice / intermediate / expert user

ModalityWizards

Domain expertise Novice / intermediate / expert user

DocumentationHelp

Expectation AppearanceBehaviour

ThemeNavigation

User Experience

8 / 50

Page 9: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

17

User AnalysisIf you don’t understand what the users want to do with a system, you have no realistic prospect of designing an effective interface.User analyses have to be described in terms that users and other designers can understand.Scenarios where you describe typical episodes of use, are one way of describing these analyses.

DD-05-UIDESGN

18

Using Personas to Create Scenarios• A Scenario is a description of a persons

interaction with a system• It describes a specific instance of the tasks that

need to be done and the sequence of user interactions required to achieve the end goal

• Scenarios differ from use cases in that they focus on the user, not the system

• Scenarios are used in the design process to validate the design

DD-05-UIDESGN

User Experience

9 / 50

Page 10: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

19

Scenario Example

20

User Interaction ScenarioJane is a student of Religious Studies and is working on an essay on Indian architecture and how it has been influenced by religious practices. To help her understand this, she would like to access some pictures of details on notable buildings but can’t find anything in her local library.

She approaches the subject librarian to discuss her needs and he suggests some search terms that might be used. He also suggests some libraries in New Delhi and London that might have this material so they log on to the library catalogues and do some searching using these terms. They find some source material and place a request for photocopies of the pictures with architectural detail to be posted directly to Jane.

DD-05-UIDESGN

User Experience

10 / 50

Page 11: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

21

Requirements From The Scenario• Users may not be aware of appropriate search

terms so need a way of helping them choose terms

• Users have to be able to select collections to search

• Users need to be able to carry out searches and request copies of relevant material

DD-05-UIDESGN

22

ExerciseIdentify and create 2 or 3 sample personas for your food delivery businessCreate some candidate scenarios for your personasBe ready to present your personas and scenarios to the rest of the class

User Experience

11 / 50

Page 12: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

23

What Happens to the Personas?Now we have some personas, we can begin to explore what it is that these people will want from our applicationOne popular process to facilitate this is Story Mapping

2424

Story Mapping

DD-05-UIDESGN

User Experience

12 / 50

Page 13: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

25

Story Mapping – Why?This is a very powerful way to map out your product backlog and determine priorities

Stories are often related and groups of stories will define specific aspects of the functionalityStory mapping helps to visualize these relationships and then assign stories to releases and sprints more easilyMakes the work flow visibleShows how large pieces of functionality can be split into smaller unitsHelps to confirm the completeness of the backlogProvides a context for prioritisationHelps to plan releases that are complete and valuable

26

Story Mapping

http://agileproductdesign.com/presentations/user_story_mapping/index.html

User Experience

13 / 50

Page 14: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

27

Story Mapping Process

The basic process is as shown above– Identify user goals– Identify what activities they will have relating to

those goals– Identify the tasks that they will need to complete– Identify user stories from the tasks

GoalsGoals ActivitiesActivities TasksTasks User StoriesUser

Stories

28

Story Mapping and DesignStory Mapping is often done early on in the overall SDLC to aid in the identification of user storiesThe process can go something like this

1. Identify the personas2. Identify the scenarios (what they want to achieve)3. Begin a story mapping exercise, identifying the goals

and tasks the user will need to carry out4. From the tasks that the user needs to carry out, identify

the user stories5. From the user stories, create prototype UIs as paper

wireframes6. Validate the UIs with user testing and feedback7. Create the UI

User Experience

14 / 50

Page 15: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

29

Story Mapping Example - Goals

The first thing to identify are the user goalsLet’s use an auction site as an exampleGoals would include

– Bidding on items– Buying items– Adding items to be sold– Leaving feedback

GoalsGoals Activities Tasks User Stories

30

Story Mapping Example - Activities

From each goal we identify activities, for exampleFor the goal ‘Buy Item’ activities will include

– Find Item– Pay for it

Goals Activities Tasks User Stories

User Experience

15 / 50

Page 16: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

31

Story Mapping Example - Tasks

Each activity will require a number of tasksFor the goal ‘Buy Item’ activities tasks will include

– Find Item• Drill into categories• Drill into specific item

– Pay for it• Select payment method• Enter payment details• Confirm payment

Goals Activities Tasks User Stories

32

Activities vs TasksIf you can’t identify anything below activities then don’t be concerned

– Some things just have goals and activities – think of an ATM

Goal – withdraw cashActivities

– Insert card– Enter Pin– Select amount– Take cash– Take card

We don’t need tasks here as well as it’s quite simple

User Experience

16 / 50

Page 17: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

33

Story Mapping Example – User Stories

From the tasks and activities we can identify what is required in terms of the more technically familiar to many – the user stories

Goals Activities Tasks User Stories

34

User StoriesUser Stories are the basic unit of scope in agileThey are captured on a card and form the basis for conversations between the designer, customer, developer, testerUser Stories follow a standard written form

As a …I want ...So that ...And the value to xxx is ...

User Experience

17 / 50

Page 18: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

35

User Story ExampleAs a customerI want to search for an item within your auction siteSo that I might buy itAnd the value to ACME Auctions is we get 10% of all revenue every time they do make a purchase

36

ExerciseFor our new food delivery project, identify some examples of the following

– Goals– Activities– Tasks– User Stories

Be prepared to feed back to the rest of the group your work

User Experience

18 / 50

Page 19: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

37

Acceptance CriteriaOne part of the stories we have not discussed yet are the Acceptance CriteriaAcceptance Criteria provide a set of test cases around our story, and from a UI perspective, they also contain the wireframes that relate to the implementation of the screens for the story

3838

UX Acceptance Criteria -Protoyping

User Experience

19 / 50

Page 20: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

39

Lean UX PracticesWe now have stories, but ultimately as developers we need to create screens

– What will they look like and how will they work?

Use Paper and HTML prototyping in early stagesCarry out usability testing earlyUse personas to help understand your users

DD-05-UIDESGN

40

User Interface PrototypingOur User Stories provide the basis for the requirements but we need to come up with a user interface which can be incorporated into our Acceptance CriteriaIn Lean UX, this is commonly done through iteratively prototyping The aim of prototyping is to allow users to gain direct experience with the interface giving you immediate feedback on suitability

– Without such direct experience, it is impossible to judge the usability of an interface

The best way to prototype in Lean UX is– Use paper early in the process– As the design is then refined, switch to increasingly

sophisticated HTML prototypes

DD-05-UIDESGN

User Experience

20 / 50

Page 21: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

41

Lo-Fi PrototypingWork through scenarios using sketches of the interface.Use a storyboard to present a series of interactions with the system.Paper prototyping is an effective way of getting user reactions to a design proposal.Alternatively, tools could be used such as

– Powerpoint– Balsamiq

These tools make more sense with distributed teams when you cannot easily share paper

DD-05-UIDESGN

42

Hi Fi PrototypingCreate simple HTML pages that give the appropriate user experience

– DON’T focus on the minutiae of the look and feel– DO focus on the flow, the user experience, and the

user journeyAlternative to HTML you can also use Axure

DD-05-UIDESGN

User Experience

21 / 50

Page 22: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

43

Usability TestingIn Lean UX user experience is critical to the process in order for you to get early feedback on your candidate UXWhen getting feedback, you must focus on

– Learnability– Speed of operation– Robustness– Recoverability– Adaptability

DD-05-UIDESGN

44

Usability Attributes

DD-05-UIDESGN

User Experience

22 / 50

Page 23: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

45

Usability TestingTechniquesQuestionnaires for user feedback.Video recording of system use and subsequent tape evaluation.Instrumentation of code to collect information about facility use and user errors.The provision of code in the software to collect on-line user feedback.

DD-05-UIDESGN

46

Running a Usability TestYou will need to ensure that you are prepared to run the test wellYou must consider

• What are your aims• What type of users are you looking for• What tasks are you wanting to set them

A good resource for usability testing can be found here

• https://articles.uie.com/usability_testing_three_steps/

User Experience

23 / 50

Page 24: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

4747

UX Best Practices

48

Introduction• Before you begin creating wireframes, we must

first go through some general UX and design best practices

DD-05-UIDESGN

User Experience

24 / 50

Page 25: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

49

UX Design Discussion• Discussion

– What is UX Design?– Who would like to offer up a definition?

– What happens when it is Lean UX Design?

DD-05-UIDESGN

50

UX Design• The problem can be that it depends who you ask

as to what answer you get• UX Design however does cover a number of

disciplines and different people tend to emphasize different ones– Usability – Design of the User Interactions– Information Modeling– Look and Feel– How the User Interacts with the System

DD-05-UIDESGN

User Experience

25 / 50

Page 26: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

51

The UX Design Process• UX design is an iterative process involving close

liaisons between users and designers.• The 3 core activities in this process are:

– User analysis. Understand what the users will do with the system;

– System prototyping. Develop a series of prototypes for experiment;

– Interface evaluation. Experiment with these prototypes with users.

DD-05-UIDESGN

52

The Design Process within AgileWhen working in Agile teams, the design work cannot all be done in the Sprint containing the user storyWithin any sprint, you will need to work on the design aspects of stories further ahead in the release plan to ensure that you can complete them on time

• Discussion• How does this work in your current teams?

User Experience

26 / 50

Page 27: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

53

A Sample Design Process

DD-05-UIDESGN

Executableprototype

Designprototype

Produce paper-based design

prototype

Producedynamic design

prototype

Evaluate designwith end-users

Implementfinal userinter face

Evaluate designwith end-users

Analyse andunderstand

user activities

54

Specific UX Best Practices• Structure & organisation• Navigation models• Layout, colour, graphics, icons, and text choice• Choosing appropriate controls• Error and feedback design• Creating excellent screens and pages

DD-05-UIDESGN

User Experience

27 / 50

Page 28: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

55

Structure and Organisation of Pages and Screens• Mental models• Information hierarchy• Sitemaps• Screen flows

DD-05-UIDESGN

56

The Mental Model• If you give your grandparent one of your old

smartphones and tell them they can use it to make phone calls– They will have a mental model of how that would work

• Some buttons to press for the numbers, and then a microphone at the bottom and a speaker at the top maybe?

• Users of your systems will have a mental model of how your system will work before they even begin

DD-05-UIDESGN

User Experience

28 / 50

Page 29: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

57

The Conceptual Model• The conceptual model is the actual model that

your system adopts, so in the example, your grandparent has an expectation of how it will work – the mental model

• They will then experience the conceptual model – how it actually works on the smartphone

• Any disconnect between the mental model and the conceptual model will play a big part in the users experience of your system

DD-05-UIDESGN

58

Design Principles• Given that you want the conceptual model to be

as close to the mental model as possible, you must consider the following principles– User Familiarity– Consistency– Minimal surprise– Recoverablility– User guidance– User Diversity

• You will be introduced to these on the following pages

DD-05-UIDESGN

User Experience

29 / 50

Page 30: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

59

Design Principles (1)• User familiarity

– The interface should be based on user-oriented terms and concepts rather than computer concepts. For example, an office system should use concepts such as letters, documents, folders etc. rather than directories, file identifiers, etc.

• Consistency– The system should display an appropriate level

of consistency. Commands and menus should have the same format, command punctuation should be similar, etc.

• Minimal surprise– If a command operates in a known way, the user

should be able to predict the operation of comparable commands

DD-05-UIDESGN

60

Design Principles (2)• Recoverability

– The system should provide some resilience to user errors and allow the user to recover from errors. This might include an undo facility, confirmation of destructive actions, 'soft' deletes, etc.

• User guidance– Some user guidance such as help systems, on-line

manuals, etc. should be supplied• User diversity

– Interaction facilities for different types of user should be supported. For example, some users have seeing difficulties and so larger text should be available

DD-05-UIDESGN

User Experience

30 / 50

Page 31: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

61

Interaction Styles• Direct manipulation• Menu selection• Form fill-in• Command language• Natural language

DD-05-UIDESGN

62

Interaction Styles

DD-05-UIDESGN

User Experience

31 / 50

Page 32: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

63

Structuring Information• We have discussed principles around general

user experience– Mental model - Conceptual Model

• But what about the information, how do you present that?

DD-05-UIDESGN

64

Information Hierarchies

In the discipline of data science, there is a pyramid called the DIKW Pyramid

DD-05-UIDESGN

WisdomWisdom

KnowledgeKnowledge

InformationInformation

DataData

User Experience

32 / 50

Page 33: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

65

DIKW• Data

– Raw facts• Information

– Facts with a level of description and interpretation• Knowledge

– Processed information that has been structured and organised

• Wisdom– Appreciation of why, and then also what to do in

response

DD-05-UIDESGN

66

DIKW and a UI• This is relevant to your UI experience

– Are you just dumping data?– Do you provide any information?– Are you interpreting that information?– Are you providing a what to do – the ‘Call to Action’

• Your UI must provide information that can be easily interpreted and then a clear call to action must be visible as the ’wise’ response

• How you present this information is therefore very important

DD-05-UIDESGN

User Experience

33 / 50

Page 34: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

67

Information Presentation• Information presentation is concerned with

presenting system information to system users• The information may be presented directly such as

text in a word processor• The information may be transformed in some way

for presentation such as some graphical form

DD-05-UIDESGN

68

Information Presentation

DD-05-UIDESGN

Information to be Displayed

Information Processing

Display

User Experience

34 / 50

Page 35: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

69

Information Presentation• Static information

– Initialised at the beginning of a session. It does not change during the session

– May be either numeric or textual• Dynamic information

– Changes during a session and the changes must be communicated to the system user

– May be either numeric or textual

DD-05-UIDESGN

70

Information Display Factors• Is the user interested in precise information or

data relationships?• How quickly do information values change?

Must the change be indicated immediately?• Must the user take some action in response to

a change?• Is there a direct manipulation interface?• Is the information textual or numeric? • Are relative values important?

DD-05-UIDESGN

User Experience

35 / 50

Page 36: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

71

Alternative information presentations

DD-05-UIDESGN

72

Analogue Or Digital Presentation?• Digital presentation

– Compact - takes up little screen space– Precise values can be communicated

• Analogue presentation– Easier to get an 'at a glance' impression of a value– Possible to show relative values– Easier to see exceptional data values

DD-05-UIDESGN

User Experience

36 / 50

Page 37: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

73

Presentation Methods

DD-05-UIDESGN

1

3

4 20 10 20

Dial with needle Pie chart Thermometer Horizontal bar

74

Displaying Relative Values

DD-05-UIDESGN

0 100 200 300 400 0 25 50 75 100

Pressure Temperature

User Experience

37 / 50

Page 38: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

75

Data visualisation• Concerned with techniques for displaying large

amounts of information• Visualisation can reveal relationships between

entities and trends in the data• Possible data visualisations are

– Weather information collected from a number of sources

– The state of a telephone network as a linked set of nodes

– Chemical plant visualised by showing pressures and temperatures in a linked set of tanks and pipes

– A model of a molecule displayed in 3 dimensions– Web pages displayed as a hyperbolic tree

DD-05-UIDESGN

76

Data Visualisation and Big DataData Visualisation is increasingly important when considering big dataFirms have increasing amounts of data, but if they cannot visualise it effectively to look for patterns then they cannot use that dataDavid McCandless says"By visualizing information, we turn it into a landscape that you can explore with your eyes, a sort of information map. And when you're lost in information, an information map is kind of useful."

User Experience

38 / 50

Page 39: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

77

Visualisation ToolsMany tools exist to help create effective visualisations such as• ChartJS• Raw• ZingChart

A helpful list can be found here• http://www.creativebloq.com/design-tools/data-

visualization-712402

78

Considering Colour• Colour adds an extra dimension to an interface

and can help the user understand complex information structures.

• Colour can be used to highlight exceptional events.

• Common mistakes in the use of colour in interface design include:– The use of colour to communicate meaning;– The over-use of colour in the display.

DD-05-UIDESGN

User Experience

39 / 50

Page 40: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

79

Colour Use Guidelines• Limit the number of colours used and be

conservative in their use• Use colour change to show a change in system

status• Use colour coding to support the task that users

are trying to perform• Use colour coding in a thoughtful and consistent

way• Be careful about colour pairings

DD-05-UIDESGN

Not all colours work well together JFor those of you with a print out, this is white writing with the yellow background/

80

Error Messages• Error message design is critically important

Poor error messages can mean that a user rejects rather than accepts a system

• Messages should be polite, concise, consistent and constructive

• The background and experience of users should be the determining factor in message design

DD-05-UIDESGN

User Experience

40 / 50

Page 41: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

81

Design Factors In Message Wording

DD-05-UIDESGN

82

User Error• Assume that a nurse misspells the name of a

patient whose records he is trying to retrieve.

DD-05-UIDESGN

Please type the patient’s name in the box then click on OK

MacDonald, R.

OK Cancel

Patient’s name

User Experience

41 / 50

Page 42: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

83

Good And Bad Message Design

DD-05-UIDESGN

Error #27

Invalid patient id

OK Cancel

System-oriented error message User-orient ed error message

R. MacDonald is not a registered patientClick on Patients for a list of patientsClick on Retry to re-input the patient’s nameClick on Help for more information

Patients Help Retry Cancel

84

Site Maps• From a design point of view, the most important

thing is that your site design is intuitive– Exercise – find the Microsoft Action Pack Subscription

Page on the Microsoft web site WITHOUT using search• You must consider therefore the navigation

requirements for your site from the perspective of the users– This is where personas come in very useful– Also remember the mental model that users will have

User Experience

42 / 50

Page 43: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

85

Navigation Best Practices• Keep it simple with a small number of links• Avoid drop down menus for navigation

– Bad for Search Engine Optimization (SEO) and bad for user experience

• Keep your menus in obvious places• Avoid using images and buttons and use links• Give your links meaningful and descriptive

names

86

Responsive Design Considerations• You have to consider responsive aspects

– Screen size– Portrait / Landscape– Keyboard / Mouse vs Touchscreens

User Experience

43 / 50

Page 44: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

87

Responsive Design Best Practices}Design for both mobile and desktop

» Don’t just design for desktop and put in some breakpoints for mobile layout to rearrange it for mobile

}Consider what is important to mobile users» Will it be easy to find?

}Remove all clutter» If you don’t need it, get rid of it

}Use icons over text – easier to navigate on mobile» And make those icons SVG so they scale easily

}Consider images and fonts» How will they come across on different devices, and how will

they affect download speeds}Consider your input methods

» When did you last fill in a large form on a phone?

88

Responsive Design ExerciseThe following Web Page lists 10 Best Practices for a Responsive Web site• http://thenextweb.com/dd/2015/10/19/10-rules-

of-best-practice-for-responsive-design/

In teams of 2 or 3, review a well known Web site and be prepared to present back to the group what worked and didn’t work in the light of the best practices listed on the site above

User Experience

44 / 50

Page 45: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

89

Exercise• Come up with some suitable wireframes for one of

the user stories that you have created for your food ordering platform

• Consider– Mobile and Desktop layouts– Use of colour and fonts– Use of icons– How you will display information– How you will handle data input

• Once you think you have a good starting point, pair up with another group and elicit feedback on each others designs

• Based on the feedback, incorporate any changes• Be prepared to present your updated designs to the

rest of the group

DD-05-UIDESGN

90

Considering AccessibilityThere are a number of things you can consider when designing the UX for accessibilityHere are some considerations1. Maintain clear logical designs and navigation2. Enable keyboard navigation3. Prioritise the clarity of text4. Don’t just rely on colour cues5. Order the content for screen readers6. Ensure link text explains the purpose of the link7. For touch controls use 40pts x 40pts minimum8. Use a checklistTaken from http://www.tuicool.com/articles/2E7z6nr

User Experience

45 / 50

Page 46: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

91

Maintain Clear Logical DesignsThis is beneficial to everyone!

• Getting this right also goes a long way to making your site accessible since it will be following a consistent structure

92

Enable Keyboard NavigationThis is also beneficial to everyoneFor many disabled people this is essential since they cannot use a mouseFor consistency, use industry recognised keyboard controls

• https://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts

Consider also that some applications are used by staff who do not use a mouse such as some call centre operatives

User Experience

46 / 50

Page 47: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

93

Prioritise Text ClarityEnsure that the fonts you select and the textual layout is very clearConsider• Font choice• Character spacing• Line spacing

94

Don’t Just Rely on Colour CuesFor the visually impaired your colour cues will not be visible

• Do not rely on colour alone to help your users know what to do

User Experience

47 / 50

Page 48: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

95

Order Content for Screen ReadersOne recommendation is to put the HTML for menus at the bottom of the page but have CSS display them near the top

• This is good for screen readers so the user does not have to listen to your menus before they hear the main content

96

Use Explanatory LinksLinks with ‘Click here’ are meaningless to screen readersLinks that have a clear message make it much easier to follow what the links are about

Click Here vs Read about our new product

User Experience

48 / 50

Page 49: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

97

Use Large Touch ControlsFor an able bodied person, some touch controls can be problematicThe general recommendation is to use 40x40 point sizes for your touch controls

98

Use a ChecklistUse a checklist to make sure that your application meets all of the accessibility requirementsA checklist will help you to ensure that you have considered everything that you need toA detailed quick reference can be found at the W3C site here

• https://www.w3.org/WAI/WCAG20/quickref/

User Experience

49 / 50

Page 50: UX UI Foundations - Conygreneueda.conygre.com/citi/content/enterprise/UX.pdf · platform for ordering and delivering restaurant quality meals in Europe with 1 million repeat customer

99

Lean UX Key Points• The user interface design process involves user

analysis using personas, system prototyping and prototype evaluation

• The aim of creating personas is to sensitise designers to the ways in which users actually work

• UI prototyping should be a staged process with early paper prototypes used as a basis for automated prototypes of the interface

• The goals of UI evaluation are to obtain feedback on how to improve the interface design and to assess if the interface meets its usability requirements

DD-05-UIDESGN

100

What Next?• You will now be introduced to the technical

aspects of this training• You will see how to create UIs applying the

principles that have been discussed up to now

User Experience

50 / 50