improve ux with interface iterative design - part 1

Preview:

DESCRIPTION

to demonstrate how iterative design helps solve usability issues and thus improve the user experience:1. we ran a usability test (first click test) on one of our favorite websites (The Next Web)2. we created a mockup of the web page with refinements in accordance to the test results3. we ran a new first click test on the mockup using the same task for a direct comparison

Citation preview

part 1 - desktop

improve your websiteuser experience

interface iterative design

a sneak peek...

35%suitable path

15%search

50%not suitable path

44%suitable path

28%search option

28%not suitable path

existing interface

alternative interface

overall response time: 41 seconds

overall response time: 32 seconds

+9% +13% -22% -22%+9% +13% -22% -22%

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

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

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

existing interface

heat map

TECH 40%

GEAR 35%

15%

10%

top choices and overall results

MORE

35%suitable path

15%search

50%not suitable path

43s

47s

20s

45s

no

yes

-

no

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

add a simple description of each section under the related labeland

change the "search" icon to a search box and make it more prominentand

remove the "MORE" section and re-organize its content and

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

recommendationsto improve the interface based on test results

alternative interface

heat map

GEAR 44%

SEARCH BAR 28%

24%

4%

top choices and overall results

LAUNCH

44%suitable path

28%search option

28%not suitable path

34s

22s

34s

61s

no

yes

-

no

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

TECH

comparison

35%suitable path

15%search

50%not suitable path

44%suitable path

28%search option

28%not suitable path

existing interface

alternative interface

overall response time: 41 seconds

overall response time: 32 seconds

+9% +13% -22% -22%

next iteration?

the percentage of not suitable paths should be further reduced:and

change the words in the section descriptions to clearly differentiate each oneand

an open card sorting test could help organize the sections' content and improve their labels

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

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

a

support@leendii.com@leendiiUX

Recommended