SlideShare a Scribd company logo
responsive web design
and user experience
phone vs tablet vs desktop
a short study
we ran the same usability test (first click
test) on the phone, tablet and desktop
version of one of our favorite websites (The
Next Web) to see how they compare.
here we report the test results and discuss
what could improve the user experience
based on these results.
the study
the test
in a first click test a website 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 task
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?
phone
desktop
tablet
screenshot as tested
click map detail and analysis
TNW 30%
25%
45%
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)
what could improve the user experience
based on the test results
phone
desktop
tablet
screenshot as tested
click map detail and analysis
32%
4%
64%MORE
TNW
News
remove the "MORE" section and re-organize its content
and
add a dropdown button called "SECTIONS" with a menu
showing all the website sections (these are currently
under the "MORE" section)
and
change the "search" icon to a search box and make it
more prominent
and
remove "News" and the "menu down" icon from the TNW
logo. make the logo a link to the homepage only
what could improve the user experience
based on the test results
phone
desktop
tablet
screenshot as tested
click map detail and analysis
GEAR 35%
15%
40%
10%
TECH
MORE
add a simple description of each section under the
related label
and
change the "search" icon to a search box and make it
more prominent
and
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
what could improve the user experience
based on the test results
for more information please visit
www.leendii.com
and get in touch,
we are happy to hear from you
a
support@leendii.com
@leendiiUX

More Related Content

Viewers also liked

Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Peak Usability
 
User Experience Design
User Experience DesignUser Experience Design
User Experience Design
Justin Lee
 
User Experience Design in context of Graphic Design
User Experience Design in context of Graphic DesignUser Experience Design in context of Graphic Design
User Experience Design in context of Graphic Design
Jiri Jerabek
 
Visualising the User Experience
Visualising the User ExperienceVisualising the User Experience
Visualising the User Experience
Grant Robinson
 
Typography and User Experience in Web Design
Typography and User Experience in Web DesignTypography and User Experience in Web Design
Typography and User Experience in Web Design
Sara Cannon
 
User Experience Design: The Missing Ingredient
User Experience Design: The Missing IngredientUser Experience Design: The Missing Ingredient
User Experience Design: The Missing Ingredient
Tom Nunes
 

Viewers also liked (6)

Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
 
User Experience Design
User Experience DesignUser Experience Design
User Experience Design
 
User Experience Design in context of Graphic Design
User Experience Design in context of Graphic DesignUser Experience Design in context of Graphic Design
User Experience Design in context of Graphic Design
 
Visualising the User Experience
Visualising the User ExperienceVisualising the User Experience
Visualising the User Experience
 
Typography and User Experience in Web Design
Typography and User Experience in Web DesignTypography and User Experience in Web Design
Typography and User Experience in Web Design
 
User Experience Design: The Missing Ingredient
User Experience Design: The Missing IngredientUser Experience Design: The Missing Ingredient
User Experience Design: The Missing Ingredient
 

Similar to responsive web design and user experience

improve ux with interface iterative design -part 2
improve ux with interface iterative design -part 2improve ux with interface iterative design -part 2
improve ux with interface iterative design -part 2
Mauro Pellegrini
 
improve ux with interface iterative design - part 1
improve ux with interface iterative design - part 1improve ux with interface iterative design - part 1
improve ux with interface iterative design - part 1
Mauro Pellegrini
 
first click test
first click testfirst click test
first click test
Mauro Pellegrini
 
Magento responsive 3 d printing website theme
Magento responsive 3 d printing website themeMagento responsive 3 d printing website theme
Magento responsive 3 d printing website theme
EmilyPhan21291
 
Ux proposal - SoccerTrac
Ux proposal - SoccerTracUx proposal - SoccerTrac
Ux proposal - SoccerTrac
Hershey Desai
 
Mockapp library 100
Mockapp library 100Mockapp library 100
Mockapp library 100
comdes
 
Mockapp_Library_110.ppt
Mockapp_Library_110.pptMockapp_Library_110.ppt
Mockapp_Library_110.ppt
University of Manchester
 
BESICS OFF TETA.pdf
BESICS  OFF  TETA.pdfBESICS  OFF  TETA.pdf
BESICS OFF TETA.pdf
Ahmad Ahmad
 
feelDweb official guide
feelDweb official guidefeelDweb official guide
feelDweb official guide
Superestratega
 
ObiMobile editor FAQ
ObiMobile editor FAQObiMobile editor FAQ
ObiMobile editor FAQ
ObiMobile
 
Design for charms & contracts
Design for charms & contractsDesign for charms & contracts
Design for charms & contracts
Maria Nasioti
 
Canvas Orientation Video Script Final Edits
Canvas Orientation Video Script Final EditsCanvas Orientation Video Script Final Edits
Canvas Orientation Video Script Final Edits
Michelle Tovar
 
Putti links tutorial
Putti links tutorialPutti links tutorial
Putti links tutorial
PuttiApps
 
Links Tutorial
Links TutorialLinks Tutorial
Links Tutorial
My App Editor
 
How to Navigate PerformancePoint 2010 Dashboards and Explore Data - EPC Group
How to Navigate PerformancePoint 2010 Dashboards and Explore Data - EPC GroupHow to Navigate PerformancePoint 2010 Dashboards and Explore Data - EPC Group
How to Navigate PerformancePoint 2010 Dashboards and Explore Data - EPC Group
EPC Group
 
Sharepoint mobile version v2
Sharepoint mobile version v2Sharepoint mobile version v2
Sharepoint mobile version v2
MJ Ferdous
 
Locations Tutorial
Locations TutorialLocations Tutorial
Locations Tutorial
PuttiApps
 
Locations tutorial
Locations tutorialLocations tutorial
Locations tutorial
My App Editor
 
usability review
usability reviewusability review
usability review
Mauro Pellegrini
 
App project
App projectApp project
App project
Stephen205
 

Similar to responsive web design and user experience (20)

improve ux with interface iterative design -part 2
improve ux with interface iterative design -part 2improve ux with interface iterative design -part 2
improve ux with interface iterative design -part 2
 
improve ux with interface iterative design - part 1
improve ux with interface iterative design - part 1improve ux with interface iterative design - part 1
improve ux with interface iterative design - part 1
 
first click test
first click testfirst click test
first click test
 
Magento responsive 3 d printing website theme
Magento responsive 3 d printing website themeMagento responsive 3 d printing website theme
Magento responsive 3 d printing website theme
 
Ux proposal - SoccerTrac
Ux proposal - SoccerTracUx proposal - SoccerTrac
Ux proposal - SoccerTrac
 
Mockapp library 100
Mockapp library 100Mockapp library 100
Mockapp library 100
 
Mockapp_Library_110.ppt
Mockapp_Library_110.pptMockapp_Library_110.ppt
Mockapp_Library_110.ppt
 
BESICS OFF TETA.pdf
BESICS  OFF  TETA.pdfBESICS  OFF  TETA.pdf
BESICS OFF TETA.pdf
 
feelDweb official guide
feelDweb official guidefeelDweb official guide
feelDweb official guide
 
ObiMobile editor FAQ
ObiMobile editor FAQObiMobile editor FAQ
ObiMobile editor FAQ
 
Design for charms & contracts
Design for charms & contractsDesign for charms & contracts
Design for charms & contracts
 
Canvas Orientation Video Script Final Edits
Canvas Orientation Video Script Final EditsCanvas Orientation Video Script Final Edits
Canvas Orientation Video Script Final Edits
 
Putti links tutorial
Putti links tutorialPutti links tutorial
Putti links tutorial
 
Links Tutorial
Links TutorialLinks Tutorial
Links Tutorial
 
How to Navigate PerformancePoint 2010 Dashboards and Explore Data - EPC Group
How to Navigate PerformancePoint 2010 Dashboards and Explore Data - EPC GroupHow to Navigate PerformancePoint 2010 Dashboards and Explore Data - EPC Group
How to Navigate PerformancePoint 2010 Dashboards and Explore Data - EPC Group
 
Sharepoint mobile version v2
Sharepoint mobile version v2Sharepoint mobile version v2
Sharepoint mobile version v2
 
Locations Tutorial
Locations TutorialLocations Tutorial
Locations Tutorial
 
Locations tutorial
Locations tutorialLocations tutorial
Locations tutorial
 
usability review
usability reviewusability review
usability review
 
App project
App projectApp project
App project
 

Recently uploaded

manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
wolfsoftcompanyco
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
Toptal Tech
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
k4ncd0z
 
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
fovkoyb
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
ysasp1
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
uehowe
 
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
bseovas
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
davidjhones387
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
xjq03c34
 
Gen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needsGen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needs
Laura Szabó
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
uehowe
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
uehowe
 
Design Thinking NETFLIX using all techniques.pptx
Design Thinking NETFLIX using all techniques.pptxDesign Thinking NETFLIX using all techniques.pptx
Design Thinking NETFLIX using all techniques.pptx
saathvikreddy2003
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024
hackersuli
 

Recently uploaded (19)

manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
 
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
 
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
 
Gen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needsGen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needs
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
 
Design Thinking NETFLIX using all techniques.pptx
Design Thinking NETFLIX using all techniques.pptxDesign Thinking NETFLIX using all techniques.pptx
Design Thinking NETFLIX using all techniques.pptx
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024
 

responsive web design and user experience

  • 1. responsive web design and user experience phone vs tablet vs desktop a short study
  • 2. we ran the same usability test (first click test) on the phone, tablet and desktop version of one of our favorite websites (The Next Web) to see how they compare. here we report the test results and discuss what could improve the user experience based on these results. the study
  • 3. the test in a first click test a website screenshot is shown to test participants. the participants are asked where they would click (once - the first click only) to perform a required task
  • 4. the task 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?
  • 7. click map detail and analysis TNW 30% 25% 45%
  • 8. 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) what could improve the user experience based on the test results
  • 11. click map detail and analysis 32% 4% 64%MORE TNW News
  • 12. remove the "MORE" section and re-organize its content and add a dropdown button called "SECTIONS" with a menu showing all the website sections (these are currently under the "MORE" section) and change the "search" icon to a search box and make it more prominent and remove "News" and the "menu down" icon from the TNW logo. make the logo a link to the homepage only what could improve the user experience based on the test results
  • 15. click map detail and analysis GEAR 35% 15% 40% 10% TECH MORE
  • 16. add a simple description of each section under the related label and change the "search" icon to a search box and make it more prominent and 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 what could improve the user experience based on the test results
  • 17. for more information please visit www.leendii.com and get in touch, we are happy to hear from you a support@leendii.com @leendiiUX