• training 2 Why bother with mobile? • People have smartphones and are increasingly using them • People think of things they want to buy everywhere, not just at home • Mobile is often used even when a computer is available • There’s things you can do on a mobile but not on a computer
• training 3 Why mobile web? • Reach the maximum number of platforms • Re-use existing web development skills and resources • Capability gap between mobile and apps is closing • Web likely to be a first point of contact if people search for your brand or products on Google
• training 5 Mobile e-commerce site checklist 1. Help people find your mobile site 2. Avoid data entry where possible 3. Cater for mobile data connections 4. Reassure customers about transaction security 5. Think about the post-transaction stage
• training 7 Automatically redirect • Don’t rely on people to remember a special mobile link that you’ve advertised • Detect visitors using a mobile phone browser and redirect to the mobile version automatically
• training 8 When redirection fails … • Automatic redirection isn’t 100% reliable • Use a predictable mobile URL – e.g. m.example.com or www.example.com/mobile • Make sure there’s a link to the mobile version of your site in the desktop version (and vice versa) The link to the mobile version is placed on the top of the page where it’s likely to be noticed if the page loads in a mobile browser.
• training 9 What about tablets? • Tables are advertised as having large screens and good web browsers and most people expect to see the full version of a website • Avoid presenting tablet users with the mobile version of your website - it will usually appear oversized and will be difficult to use • Make sure your desktop site is usable on tablets – Provide alternatives to Flash banners/carousels etc. – Use mobile-friendly formats for product videos
• training 11 Data entry challenges • Small screens – difficult to see exactly what you’ve typed • Small keyboards – greater likelihood for mistakes • Interruptions and lack of concentration • Credit card numbers and addresses particularly vulnerable in case of data entry mistakes
• training 12 Avoiding data entry • Re-use account information from desktop website e.g. previous shipping addresses, card information (if saved) • Use geo-location services if current position is needed (e.g. in a store finder page) • Make sure your site works well with form auto-fill on mobile browsers
• training 13 Facilitating data entry • Add auto-suggest/auto-complete functionality where appropriate (e.g. when a user is searching for a product in your website) • Use a postcode-based address finder • Use in-line validation for form fields during checkout
• training 15 What can go wrong? • Data connections can be slow • Data connections can be unreliable or unavailable in a low-signal area • Mobiles run out of battery • What if one of the above happens in the middle of a transaction?
• training 16 Avoid losing data entered by the user • Save all details in every step of a transaction e.g. the items in a shopping basket or the shipping details already entered • Make sure that a transaction can be resumed from the point where it was left, without having to start over • Capture customers' e-mail addresses or mobile phone number at the beginning of a transaction and send them instructions to help continue an interrupted transaction
• training 17 Optimise for mobile connections • Make sure images and other resources can be downloaded quickly – However, you should still allow access to high-resolution image if this is important for selling a high-value product • Minimise the number of steps that require reloading the entire page – For example, an image gallery should refresh images in- place instead of having one page per image
• training 19 Highlighting secure websites - desktop • Most desktop browsers prominently identify secure websites and help people understand if they should trust a website • Some standardisation, e.g. a padlock next to the site link, use of green colour
• training 20 Highlighting secure websites - mobile • However, mobile web browsers don’t always prominently highlight secure websites • Also, no additional information is given (such as “when you last visited this website”) • Lack of established conventions
• training 21 Work harder to promote security • Highlight your security credentials on the homepage and on pages that ask for sensitive information (especially if you’re not a well-known and established brand) • Explain why you collect personal information and what you’ll do with it • Avoid entry of sensitive information via the mobile site, by re-using information stored in an existing user account
• training 23 What happens after you buy? • Mobile users won’t put their mobile away after they finish their purchase or other transaction • If people buy on a mobile phone, they’ll also appreciate any followup to be accessible though a mobile • This includes order tracking, delivery confirmation, leaving reviews, contacting the retailer etc.
• training 24 Post-transaction tips • Provide a mobile solution for tracking the progress of an order and the delivery of the goods • For booking tickets or other services, provide a mobile-friendly booking confirmation e-mail and consider mobile ticketing solutions, where tickets can be electronically stored in a mobile phone in the form of a special barcode • In any case, ensure that all e-mails following up on a transaction are mobile-friendly
• training 25 Post-transaction tips • Make sure that key customer service areas on your website are available in a mobile-friendly format e.g.: – Terms & conditions – Contact information – Order tracking/modification/cancellation
• training 27 What if you just have a mobile app? • Make sure that your mobile app is sufficiently promoted when people visit your website through a mobile: Special banner to promote iPhone app
• training 28 Visit our stand (E7080) to talk about your mobile web design needs. Please email us for a copy of this presentation: [email protected] Visit our website to read more articles & blog posts: www.webcredible.co.uk Follow us on twitter: @webcredible
futureshape
usaito
fossamagna
maroon1st
bkuhlmann
ohbarye
oracle4engineer
furu8
sakaitakeshi
k5k
pelelgrino
emiki
ysknsid25
chriscoyier
productmarketing
tanoku
keavy
ufuk
morganepeng
trishagee
philhawksworth
pauljervisheath
quramy
samanthasiow
iamctodd
