android app usability app... · •quick intro to the design process • requirements for an app...

26
Android app usability Riaan Cornelius a.k.a Making an app useful

Upload: others

Post on 30-May-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Android app usability

Riaan Cornelius

a.k.a Making an app useful

Page 2: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

TopicsBecause nobody likes a surprise

2

• A quick intro to usability• What, Why, How and When?

• Usability Heuristics• Quick intro to the design process•

requirements for an app• A look at existing apps• Designing a new app

• Requirements• Prototyping it• Testing it

Page 3: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

What is usability

3

Usability is the ease of use and learnability of a human-made object. Usability includes methods of measuring usability, such as needs analysis and the study of the principles behind an object's perceived efficiency or elegance.

In human-computer interaction and computer science, usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed.

Definition on Wikipedia

Page 4: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

What is usabilityThe 5 quality components

4

Usability is defined by 5 quality components:• Learnability• Efficiency• Memorability• Errors• Satisfaction

Page 5: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

What is usabilityQuality metrics

5

Usability and utility are equally important.

To study a design's utility, you can use the same user research methods that improve usability.

Utility = whether it provides the features you need.Usability = how easy & pleasant these features are to use.Useful = usability + utility.

Page 6: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Why is usability important?Quality metrics

6

Usability is a necessary condition for survival.

If an app is difficult to use, people uninstall.

If users get lost in an app, they uninstall.

If an apps information is hard to read or doesn't answer users' key questions, they uninstall.

Page 7: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

How do we improve usability?Through hard work

7

Most basic and useful method: User testing.

User testing has 3 components:1. Find users2. Let them do stuff3. Observe them doing stuff

Shut up and let the users do the talking.

Page 8: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

How do we improve usability?Through hard work

8

Testing 5 users is typically enough to identify worst usability issues.

Rather than 1 big study, do lots of small tests and fix issues between every test.

The more interface ideas you test with users, the better.

Iterative design is the best way to increase UX quality.

Page 9: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

When do we look at usability?Short answer? Always!

9

Usability plays a role in each stage of the design process.

Here are the main steps:• Before starting the new design, test the old design.• Test your competitors' designs. • Conduct a field study to see how users behave in their natural habitat.• Make paper prototypes of one or more new design ideas and test them. • Refine the design ideas that test best through multiple iterations• Inspect the design relative to established usability guidelines• Once you decide on and implement the final design, test it again.

Page 10: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Usability heuristicsWhat we use to rate an app

10

Jakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines.

• Visibility of system status• Match between system and the real world • User control and freedom • Consistency and standards • Error prevention • Recognition rather than recall • Flexibility and efficiency of use • Aesthetic and minimalist design • Help users recognize, diagnose, and recover from errors • Help and documentation

Page 11: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

When do we look at usability?The cold hard truth

11

Page 12: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Requirements

12

What would a load shedding app need?

• I need some help for this part

Page 13: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Some existing apps

13

• * GridWatch - Load Shedding (News24): 100k 500k Downloads (4.3 Stars)• * Loadshedding Cape Town: 1k 5k Downloads (4.2 Stars)• Load Shed Sched: 1k 5k Downloads (4.2 Stars)• * Load Shedding Notifier (Sharenet): 10k 50k Downloads (4.2 Stars)• Load Shedding Alert: 10k 50k Downloads (4.1 Stars)• Load Shedding Notifier: 5k 10k Downloads (4.1 Stars)

• * SA Loadshed: 1k 5k Downloads (3.9 Stars)• ShedAlert load shedding alerts: 10k 50k Downloads (3.8 Stars)• Blackout: 500 1000 Downloads (3.6 Stars)• * Loadshed: 5k 10k Downloads (3.3 Stars)

• Load Shedding Schedules SA: 10k 50k Downloads (2.9 Stars)• MyEskom (Eskom): 10k 50k Downloads (2.8 Stars)• * Loadshedding SA: 5k 10k Downloads (2.8 Stars)• Load Shedding SA: 10k 50k Downloads (2.7 Stars)

Page 14: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Gridwatch Load Shedding100k 500k Downloads (4.3 Stars)

14

Page 15: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Load Shedding Cape Town1k 5k Downloads (4.2 Stars)

15

Page 16: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Load Shedding Notifier10k 50k Downloads (4.2 Stars)

16

Page 17: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

SA Loadshed1k 5k Downloads (3.9 Stars)

17

Page 18: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Loadshed5k 10k Downloads (3.3 Stars)

18

Page 19: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Loadshedding SA5k 10k Downloads (2.8 Stars)

19

Page 20: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Requirements

20

What would a load shedding app need?

• Current load shedding status• Choose an area you are interested in

• Multiple areas?• How about detecting your location and narrowing it down?• Maybe even detect my zone / region based on power outages?

• Show load shedding times for my area• What about for the next week?

• Push notifications• Countdown to start / end of load shedding?• Power utility contact details• Social media (Twitter, etc) for Eskom / power utility

Page 21: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Requirements

21

What about other usability issues?

• How do you keep all schedules updated?• Which areas do you support?• Performance?• Updates?• App size?

Page 22: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

PrototypingMake it real

22

Low fidelity:• Paper• Prototype On Paper (POP)• Balsamiq

High fidelity• Photoshop• InDesign• InVisionApp• Axure RP Pro

Page 23: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

PrototypingMake it real

23

Prototype On Paper (POP)

Page 24: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Demo

24

Demonstrationhttp://invis.io/262VK87TU

Page 25: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

25

Questions?

References:

Usability Wikipedia page: http://en.wikipedia.org/wiki/Usabilityhttp://www.nngroup.com/articles/usability-101-introduction-to-usability/

Usability Heuristics: http://www.nngroup.com/articles/ten-usability-heuristics/Prototyping: http://www.nngroup.com/courses/wireframing-and-prototyping/

Protoype On Paper: https://popapp.in/Invision: http://www.invisionapp.com/Material Design Templates: http://www.okilla.com/search.php?s=material+designAxure RP Pro: http://www.axure.com/Axure Library: http://www.axure.com/c/forum/tips-tricks-examples/14842-material-design-axure-library.html

Page 26: Android app usability app... · •Quick intro to the design process • requirements for an app •A look at existing apps •Designing a new app •Requirements •Prototyping it

Reference: Load Shedding AppsSome existing apps

26

* GridWatch - Load Shedding (News24): https://play.google.com/store/apps/details?id=com.news24.loadshedding* Loadshedding Cape Town: https://play.google.com/store/apps/details?id=com.loadshedding.capetownLoad Shed Sched: https://play.google.com/store/apps/details?id=za.co.antix.loadshedsched* Load Shedding Notifier (Sharenet): https://play.google.com/store/apps/details?id=com.uk.sharenet.loadsheddingLoad Shedding Alert: https://play.google.com/store/apps/details?id=com.bitzulu.loadsheddingalertLoad Shedding Notifier: https://play.google.com/store/apps/details?id=com.abisoft.loadsheddingnotifier

* SA Loadshed: https://play.google.com/store/apps/details?id=com.stoneagetechnologies.saloadshed* ShedAlert load shedding alerts: https://play.google.com/store/apps/details?id=com.ionicframework.clunk534363Blackout: https://play.google.com/store/apps/details?id=com.rbg.loadshed* Loadshed: https://play.google.com/store/apps/details?id=com.ionicframework.loadshed186899

Load Shedding Schedules SA: https://play.google.com/store/apps/details?id=com.ionicframework.loadshedder235300MyEskom (Eskom): https://play.google.com/store/apps/details?id=com.za.fogg.eskom.myeskom* Loadshedding SA: https://play.google.com/store/apps/details?id=co.rezonet.loadsheddingsaLoad Shedding SA: https://play.google.com/store/apps/details?id=loadsheddingsa.darkwater.com.loadsheddingsa