Desktop on Tablet UX Audit

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

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

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.

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
tablet_2x?fmt=png-alpha&qlt=100
 Potential Solution
Simplify the code and display the same image for both devices:
desk?fmt=png-alpha&qlt=100

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.

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
• 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
• Add a conditional stylesheet that increases height and width

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

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

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.
• Add a conditional stylesheet that increases height and width of
the family page inputs

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.
• Add a conditional stylesheet that increases height and width

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

Desktop on Tablet UX Audit

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Desktop on Tablet UX Audit

Similaire à Desktop on Tablet UX Audit (20)

Plus de Tim Broadwater

Plus de Tim Broadwater (20)

Dernier

Dernier (8)

Desktop on Tablet UX Audit