Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

0

Partager

Télécharger pour lire hors ligne

Desktop on Tablet UX Audit

Télécharger pour lire hors ligne

In collaboration with the Product Management Team, the UX Team has been asked to complete a website audit of the Dick’s Sporting Goods desktop website, but through a tablet device experience.

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Soyez le premier à aimer ceci

Desktop on Tablet UX Audit

  1. 1. DSG Desktop Website Experience Via Tablet USABILITY AUDIT | 11.14.16 Page 1eCommerce User Experience Table of Contents Executive Summary................................................................ Browser Window & Delivery Methods................................. Dick’s Sporting Goods Logo.................................................. L0, L1, & L2 Navigation........................................................... All Anchor Links & Information Icons.................................. Touch Keyboard & Input Types............................................ Find a Store & Product Viewer.............................................. Family Page Inputs................................................................ Input: Radial Buttons & Check Boxes.................................. Usability Audit Summary....................................................... Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 Page 8 Page 9 Page 10 Page 11 DSG Desktop Website Via Tablet Usability Audit | 11.14.16 Tim Broadwater
  2. 2. DSG Desktop Website Experience Via Tablet USABILITY AUDIT | 11.14.16 Page 2eCommerce User Experience Executive Summary Overview In collaboration with the Product Management Team, the UX Team has been asked to complete a website audit of the Dick’s Sporting Goods desktop website, but through a tablet device experience. The website audit is to be completed on https://dks-qa5.dksxchange.com, and is to evaluate the tablet for the purpose of determining and documenting the following: • From an experience perspective, what are the UX risks of the desktop on tablet experience? • Are there tap issues, pinch and zoom issues, additional customer interaction issues, any usability concerns? Checklist • Homepage • Category and Family • Product Page • Cart • Checkout • My Account • Gift Cards • Store Locater • Weekly Ad • Customer Service
  3. 3. DSG Desktop Website Experience Via Tablet USABILITY AUDIT | 11.14.16 Page 3eCommerce User Experience Browser Window & Delivery Methods  Browser Window Concern The desktop website width is 960px width. This displays acceptably in tablet landscape view, which is 1024px width, but not for portrait which is 768px width.  Potential Browser Window Solution • Set the following in the header which will make the website zoom to the tablet’s device width whether in portrait or landscape view: <meta name=”viewport” content=”width=device-width, maximum-scale=1.0” />  Delivery Methods Concern The overall width of the Delivery Methods webpage is wider that the zoom capability in portrait view, which enables horizontal scrolling.  Potential Delivery Methods Solution • CSS changes need to be made to fix this problem.
  4. 4. DSG Desktop Website Experience Via Tablet USABILITY AUDIT | 11.14.16 Page 4eCommerce User Experience Dick’s Sporting Goods Logo  Concern The desktop website displays a different logo image for tablet than it does for desktop: • http://s7d2.scene7.com/is/image/dkscdn/dsgLogo_ desk?fmt=png-alpha&qlt=100 • http://s7d2.scene7.com/is/image/dkscdn/dsgLogo_ tablet_2x?fmt=png-alpha&qlt=100  Potential Solution Simplify the code and display the same image for both devices: • http://s7d2.scene7.com/is/image/dkscdn/dsgLogo_ desk?fmt=png-alpha&qlt=100
  5. 5. DSG Desktop Website Experience Via Tablet USABILITY AUDIT | 11.14.16 Page 5eCommerce User Experience L0, L1, & L2 Navigation  Concern The L0 block sizes in portrait view are at a height of 35px, which 10px less than Apple, Android, and Dick’s Sporting Good’s style guide. Also, the L1 and L2 link sizes in portrait view are at 14px in size when the website is at device width, which is 2px smaller than the standard 16px font size in landscape view (equaling 10px in height).  Potential Solutions • Users can adjust with tablet zoom capability • Add a conditional stylesheet or JavaScript that increases the L0, L1, and L2 tap-able areas to atleast 45px by 45px. * * The Dick’s Sporting Goods style guide recommends a 45px by 45px tap-able are for touch devices.
  6. 6. DSG Desktop Website Experience Via Tablet USABILITY AUDIT | 11.14.16 Page 6eCommerce User Experience All Anchor Links & Information Icons  Anchor Link Concern All in-line text links have a height of 10px in scaled portrait view, with a variable length based on the amount of text. This is less than the recommended 45px by 45px in the Dick’s Sporting Goods style guide.  Potential Anchor Link Solutions • Users can adjust with tablet zoom capability • Add a conditional stylesheet that increases the vertical size or padding.  Information Icon Concern The information icon links in portrait view are 18px by 18px, which is 26px less than Apple, Android, and Dick’s Sporting Good’s style guide.  Potential Information Icon Solutions • Users can adjust with tablet zoom capability • Add a conditional stylesheet that increases height and width
  7. 7. DSG Desktop Website Experience Via Tablet USABILITY AUDIT | 11.14.16 Page 7eCommerce User Experience Touch Keyboard & Input Types  Touch Keyboard Concern The touch keyboard occupies one-third to one-half of the screen space when open, which is standard for tablet device keyboards, but may be odd for the desktop website. There is really no solution for this problem apart from optimizing keyboard types based on input fields (see below).  Keyboard Input Concern Touch keyboards that are email or phone in nature, are not being called specifically when applicable (e.g. default, email, phone, URL).  Potential Input Type Solution • Most mobile operating systems utilize keyboards for specific form field inputs (e.g. default, email, phone, URL).
  8. 8. DSG Desktop Website Experience Via Tablet USABILITY AUDIT | 11.14.16 Page 8eCommerce User Experience Find a Store & Product Viewer  Concern The pinch-zooming functionality on the ‘Find a Store’ locator map and within PDP Product Viewer, can potentially create instances of confusion and unexpected results for the user. Also, the ‘Click for Full Image’ link only activates on cursor hover, and cursors don’t exist on tablet.  Potential Solution • The ‘Click for Full Image’ link would need to be persistent underneath the product image
  9. 9. DSG Desktop Website Experience Via Tablet USABILITY AUDIT | 11.14.16 Page 9eCommerce User Experience Family Page Inputs  Concern The Family Page facet-filters, pagination boxes, product comparison boxes, view count boxes, and the color swatches in portrait view are 25px by 25px, which is 20px less than Apple, Android, and Dick’s Sporting Good’s style guide.  Potential Solutions • Users can adjust with tablet zoom capability • Add a conditional stylesheet that increases height and width of the family page inputs
  10. 10. DSG Desktop Website Experience Via Tablet USABILITY AUDIT | 11.14.16 Page 10eCommerce User Experience Input: Radial Buttons & Check Boxes  Concern The radial buttons in portrait view are 18px by 18px, which is 26px less than Apple, Android, and Dick’s Sporting Good’s style guide. The spacing between the radial buttons is not substantial enough (8px is recommended) to differentiate tapping. The check boxes in portrait view are 24px by 24px, which is 21px less than Apple, Android, and Dick’s Sporting Good’s style guide. The spacing between the check boxes is also not substantial enough (8px is recommended) to differentiate tapping.  Potential Solutions • Users can adjust with tablet zoom capability • Add a conditional stylesheet that increases height and width
  11. 11. DSG Desktop Website Experience Via Tablet USABILITY AUDIT | 11.14.16 Page 11eCommerce User Experience Usability Audit Summary Findings There are no egregious usability errors that occur when viewing the Dick’s Sporting Goods desktop website on a 1024px by 768px tablet. However, since the desktop website was developed without tablet in mind, there are a few alterations and modifications, that when made, could greatly improve the user experience for tablet users. These include the following: • Using a meta viewport that stretched the website width to device width no matter if you are in portrait, landscape, or go back and forth between the two orientations. • Fixing the Dick’s Sporting Goods logo to visually be the same on tablet and desktop devices. • Serve up optimized keyboards for text input fields to save user effort and time. • Allow the users to use the tablet’s native pinch-and-zoom capabilities. • Implement conditional stylesheets or JavaScript, or make CSS alterations if time permits to increase the size of anchors, inputs (e.g. radial buttons, check boxes, navigation items, facet-filters, and comparison boxes), and information icons. • On-hover functionality (e.g. image viewer) needs to be made persistent for touch devices. Research/Source Materials • Touch Target Sizes, Luke Wroblewski • Tablet Website and Application UX, Nielsen Norman Group • Visual Design for Mobile/Tablet, Nielsen Norman Group • Heuristics Checklist for Tablets, Stack Exchange • Dick’s Sporting Goods Style Guide

In collaboration with the Product Management Team, the UX Team has been asked to complete a website audit of the Dick’s Sporting Goods desktop website, but through a tablet device experience.

Vues

Nombre de vues

187

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

1

Actions

Téléchargements

7

Partages

0

Commentaires

0

Mentions J'aime

0

×