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 with the test results 3. we ran a new first click test on the mockup using the same task for a direct comparison

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

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

3. 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 results
and
we ran a new first click test on the mockup using the
same task for a direct comparison
about this presentation

4. 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

5. 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

6. existing interface

7. click map

8. 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

9. recommendations
to improve the interface based on test results
recommendations
to improve the interface based on test results
make the "search" icon bigger and position it where it
is easier to reach and select
and
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)

10. alternative interface

11. click map

12. 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

13. comparison
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

14. next iteration?
the results are currently satisfactory for this task

15. for more information please visit
www.leendii.com/interface-iterative-design
and get in touch,
we are happy to hear from you
a
support@leendii.com
@leendiiUX