improve ux with interface iterative design -part 2

15
part 2 - mobile phone improve your website user experience interface iterative design

Upload: mauro-pellegrini

Post on 12-Apr-2017

160 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: improve ux with interface iterative design -part 2

part 2 - mobile phone

improve your websiteuser experience

interface iterative design

Page 2: improve ux with interface iterative design -part 2

a sneak peek...existing interface

alternative interface

overall response time: 12 seconds

overall response time: 10 seconds

+11% +10% -21% -16%

25%suitable path

45%search option

30%not suitable path

36%suitable path

55%search option

9%ns

Page 3: improve ux with interface iterative design -part 2

to demonstrate how iterative design helps solve usability issues and thus improve your website user experience:and

we ran a usability test (first click test) on one of our favorite websites (The Next Web)and

we created a mockup of the web page with refinements in accordance to the test resultsand

we ran a new first click test on the mockup using the same task for a direct comparison

about this presentation

Page 4: improve ux with interface iterative design -part 2

in a first click test a web page screenshot is shown to test participants. the participants are asked where they would click (once - the first click only) to perform a required task

the test

Page 5: improve ux with interface iterative design -part 2

a friend told you about an interesting article regarding the Apple Watch that he found on a website last week.you have just landed on the website and are now trying to find that article.

where would you click?

the task

Page 6: improve ux with interface iterative design -part 2

existing interface

Page 7: improve ux with interface iterative design -part 2

click map

Page 8: improve ux with interface iterative design -part 2

45%

TNW 30%

25%

top choices and overall results

25%suitable path

45%search option

30%not suitable path

8s

16s

13s

no

yes

-

choice - users % - response time (seconds) - suitable path

Page 9: improve ux with interface iterative design -part 2

recommendationsto improve the interface based on test resultsrecommendationsto improve the interface based on test results

make the "search" icon bigger and position it where it is easier to reach and selectand

remove the "menu down" icon from the TNW logo. make the logo a link to the homepage only and

add a dropdown button called "SECTIONS" with a menu showing all the website sections (these are currently shown after tapping the "hamburger" icon)

Page 10: improve ux with interface iterative design -part 2

alternative interface

Page 11: improve ux with interface iterative design -part 2

click map

Page 12: improve ux with interface iterative design -part 2

55%

SECTIONS 36%

9%

top choices and overall results

36%suitable path

55%search option

9%ns

10s

12s

5s no

yes

-

choice - users % - response time (seconds) - suitable path

Page 13: improve ux with interface iterative design -part 2

comparisonexisting interface

alternative interface

overall response time: 12 seconds

overall response time: 10 seconds

+11% +10% -21% -16%

25%suitable path

45%search option

30%not suitable path

36%suitable path

55%search option

9%ns

Page 14: improve ux with interface iterative design -part 2

next iteration?

the results are currently satisfactory for this task

Page 15: improve ux with interface iterative design -part 2

for more information please visitwww.leendii.com/interface-iterative-design

and get in touch,we are happy to hear from you

a

[email protected]@leendiiUX