improve ux with interface iterative design - part 1
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 results 3. we ran a new first click test on the mockup using the same task for a direct comparisonTRANSCRIPT
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
[email protected]@leendiiUX