Usability Overview - Speaker Deck

Slide 1

Slide 1 text

UX Episode #10: Usability Overview Design and User Experience

Slide 2

Slide 2 text

● Introduction ● What is usability? ● Why is usability important? ● Usability testing ● Usability examples in PageUp ● Wrap up Agenda

Slide 3

Slide 3 text

What is usability?

Slide 4

Slide 4 text

What is usability? Learnability Efficiency Memorability Errors Satisfaction

Slide 5

Slide 5 text

Why is usability important?

Slide 6

Slide 6 text

Why is it important? https://dilbert.com/strip/2018-05-02

Slide 7

Slide 7 text

Usability Testing

Slide 8

Slide 8 text

● Identify usability/flow issues ● Understand what users are doing ● Help prioritise the work ● In/validate assumptions Why we do Usability Testing

Slide 9

Slide 9 text

● The beginning ● The middle ● The end Testing throughout the project When to do Usability Testing

Slide 10

Slide 10 text

● Reduce bias in design ● Alignment on what to work on ● Value delivery ● Consistent reporting of usability testing ○ Accurate task completion ○ Increase in task completion rates ○ Increase in customer satisfaction What does success look like if it’s done right?

Slide 11

Slide 11 text

1. Get hold of some representative users 2. Ask the users to perform representative tasks 3. Observe what the users do How to improve usability through testing

Slide 12

Slide 12 text

Questions?

Slide 13

Slide 13 text

Usability examples in PageUp

Slide 14

Slide 14 text

UI patterns

Slide 15

Slide 15 text

User interface patterns are reusable/recurring components which designers use to solve common problems in software design. UI patterns

Slide 16

Slide 16 text

● Getting user’s inputs ○ Input ﬁelds, Calendar picker, Forms ● Navigation ○ Tabs, Table of Content, Breadcrumb, Stepper ● Dealing with data or content ○ Dashboard, Search, Table, Cards ● Social ○ Comments, Share, Activity feeds ● Onboarding ○ Empty states, Tooltips, Popover, Skeleton loading UI patterns Categories

Slide 17

Slide 17 text

Breadcrumbs serve as an eﬀective visual aid, indicating the location of the user within the website’s hierarchy, making them a great source of contextual information for landing pages. UI Pattern - Breadcrumb

Slide 18

Slide 18 text

Problem: The user needs to know their location in the module’s hierarchical structure in order to possibly browse back to a higher level in the hierarchy. Usability failure: Eﬃciency Solution: UI Pattern - Breadcrumb use case

Slide 19

Slide 19 text

UI Pattern - Breadcrumb

Slide 20

Slide 20 text

Interactions

Slide 21

Slide 21 text

User interaction is the design of the interaction between users and software. Eg: Inﬁnite scroll, Sticky header, Auto save, Responsiveness, Feedback messages Interaction Design

Slide 22

Slide 22 text

Usability failure: Learnability Satisfaction

Slide 23

Slide 23 text

Accessibility

Slide 24

Slide 24 text

Inclusive Design Accessibility Usability Human Centred Design Good usability includes accessibility. Accessibility is usability applied thoroughly and in consideration of users who may not have the same physical or cognitive capabilities as your “average” user.