ui/ux general rules

Download UI/UX general rules

Post on 17-Jul-2015

169 views

Category:

Design

4 download

Embed Size (px)

TRANSCRIPT

1 . About me2. 28 Rules for smart phone web site3. Rules for contact formCASE 1CASE 2CASE 3Another rules Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential1About me

Chiaki Kasai

Designer @ DeNACo-Founded VC backed book review site startup in Japan and worked as a designer for 2 yearsTraveled all around Japan and published my travel essay book.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential21 . About me2. 28 Rules for smart phone web site3. Rules for contact formCASE 1CASE 2CASE 3Another rules Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential31. Use attractive images Carousels get a large number of taps on mobile, not on PC.

Apple decided to quit carousels and use simple picture design instead.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential42. Limit carousels up to 4 panels on mobilePC Users tend to click the first panel

ND.edu and and Nielsen showed statistical data about Carousel Interaction.The best way is to use one picture only if you use the same design on PC and smart phone.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential53. Right position is the most clickedright hander only

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential6Next,Google reveals 25 mobile rules.But we have no time to see all of them.

Please check them by your self!

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential74. CALLS-TO-ACTION FRONT AND CENTERFeature your primary calls-to-action in your most prominent site space.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential85. KEEP MENUS SHORT AND SWEETA shorter menu with distinct categories is easier for mobile visitors to navigate.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential96. MAKE IT EASY TO GET BACK TO THE HOMEPAGEUse your logo as a navigation button to return to the homepage.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential107. DONT LET PROMOTIONS STEAL THE SHOWMake sure promotions do not interfere with navigation and are clearly distinct from calls-to-action

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential118. MAKE SITE SEARCH VISIBLEPlace your site search near the top of your homepage via an open text field.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential129. ENSURE SITE SEARCH RESULTS ARE RELEVANTMake sure your site search returns the strongest results first, and implement smart-search features like autocomplete and spelling corrections.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential1310. IMPLEMENT FILTERS TO IMPROVE SITE SEARCH USABILITYOffer filters to help users get what they need from search, but make sure users cant filter a search to return zero results.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential1411. GUIDE USERS TO BETTER SITE SEARCH RESULTSIf your offerings can be easily narrowed by segment, asking a few questions upfront helps ensure visitors see relevant results.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential1512. LET USERS EXPLORE BEFORE THEY COMMITAllow visitors to use your site without registering for an account.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential1613. LET USERS PURCHASE AS A GUESTOffer the option to check out as a guest, and encourage registration with tangible benefits.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential1714. USE EXISTING INFORMATION TO MAXIMIZE CONVENIENCETake advantage of information you already have, and/or use third-party payment services to make conversion as easy as possible.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential1815. USE CLICK-TOCALL BUTTONS FOR COMPLEX TASKSOffering a prominent click-to-call button can keep users from dropping out of the funnel when they need to provide complex information.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential1916. MAKE IT EASY TO FINISH CONVERTING ON ANOTHER DEVICEMobile visitors may be researching to convert later, so offer a simple way to resume their journey on another device via social sharing, email or save-to-cart functionality.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential2017. STREAMLINE INFORMATION ENTRYOffer users a number pad for fields requiring number entry, and automatically advance them through form fields as they input information.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential2118. CHOOSE THE SIMPLEST INPUT METHOD FOR EACH TASKConsider if a toggle or dropdown menu is the optimal choice for each entry on your mobile forms, and always make sure theyre easy for users to tap.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential2219. PROVIDE A VISUAL CALENDAR WHEN SELECTING DATESKeep visitors on your site by offering date selection via a visual calendar with clear instructions.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential2320. MINIMIZE FORM ERRORS WITH LABELING AND REAL-TIME VALIDATIONUse clearly visible labels to let users know what you need, and validate for errors in real time to let them know if theres a problem before they submit a form.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential2421. DESIGN EFFICIENT FORMSMinimize the number of fields in your forms, and autofill information wherever possible. Use clearly-labeled progress bars to help users get through multi-part forms.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential2522. OPTIMIZE YOUR ENTIRE SITE FOR MOBILEYour site is easiest to use if all your pages are designed for mobile.Responsive design is Google's recommended design pattern.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential2623. DONT MAKE USERS PINCH-TO-ZOOMVisitors can miss calls-to-action if they have to zoom in a site. Design your site so that they never need to.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential2724. MAKE PRODUCT IMAGES EXPANDABLEInclude high-quality closeups of key images like product photos.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential2825. TELL USERS WHICH SCREEN ORIENTATION WORKS BESTCommunicate to users if your site works best in a certain orientation, but ensure your important calls-to-action can be completed regardless of orientation.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential2926. KEEP YOUR USER IN A SINGLE BROWSER WINDOWEnsure your calls-to-action stay in the same browser window, and add functionality to your site that addresses why consumers might switch windows.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential3027. AVOID FULL SITE LABELINGMake it easy to switch between site experiences, but use labels like desktop instead of full to be clear that both sites offer a full experience.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential3128. BE CLEAR WHY YOU NEED A USERS LOCATIONAlways make it clear why you need a users location, and how the information will influence their experience.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential321 . About me2. 28 Rules for smart phone web site3. Rules for contact formCASE 1CASE 2CASE 3Another rules Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential33CASE 1 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential34Heat map

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential35Delete extra links on header and footerThey did A/B test, and found deleting links are more effective than exist links which lead 1.6 times up conversion. Users are easy to leave your site like a customer who came to the checkout counter, so not to show extra links ,banner,and so on.

1.6 times up!Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential36CASE 2 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential37Bridal site

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential38Adopt after page 11 rules, lead to twenty two times up

Twenty two times up!Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential391. Dont divide the input box

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential402. Users are able to input whichever Half angle or Em

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential413. Use alert pop up to keep users stay on the site

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential424. Make one more effort to click

Ex ) Appeal to speed to reply, Appeal to phone number , add to word for giving a feeling of safety, Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential435. Try Input form as minimum as possible

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential446. Show step navigation on the input form

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential457. background color should be changed while inputting data

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential468. Show okeasily when users complete each section

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential479. Show Required if its required.

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential4810. Show the example input word in the form

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential4911. Dont put reset button

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential50CASE 3 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential51Bridal site for mobile

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential521. Delete Input items as much as possibleThis is a three times up conversion case of bridal site by optimizing mobile. You can improve conversion just optimizing mobile! This bridal mobile site delete 14 PC items to 5 items.

Three times up!Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Confidential53Anothe