UI/UX general rules

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

Confidential

1 . About me

2. 28 Rules for smart phone web site

3. Rules for contact form

-CASE 1

-CASE 2

-CASE 3

-Another rules


Confidential

About me

Chiaki Kasai

Designer @

DeNA

・Co-Founded VC backed book review site startup in Japan

and worked as a designer for 2 years・Traveled all around Japan and published my travel essay

book.


Confidential

1 . About me



-CASE 1

-CASE 2

-CASE 3

-Another rules


Confidential

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


Confidential

2. Limit carousels up to 4 panels

on mobile

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


Confidential

3. Right position is the most clicked

（right hander only）


Confidential

Next,

Google reveals 25 mobile rules.

But we have no time to see all of them.

Please check them by your self!


Confidential

4. CALLS-TO-ACTION FRONT

AND CENTER

Feature your primary calls-to-action in your most prominent

site space.


Confidential

5. KEEP MENUS SHORT AND

SWEET

A shorter menu with distinct categories is easier for mobile

visitors to navigate.


Confidential

6. MAKE IT EASY TO GET BACK

TO THE HOMEPAGE

Use your logo as a navigation button to return to the

homepage.


Confidential

7. DON’T LET PROMOTIONS

STEAL THE SHOW

Make sure promotions do not interfere with navigation and

are clearly distinct from calls-to-action


Confidential

8. MAKE SITE SEARCH VISIBLE

Place your site search near the top of your homepage via an

open text field.


Confidential

9. ENSURE SITE SEARCH

RESULTS ARE RELEVANT

Make sure your site search returns the strongest results first,

and implement smart-search features like autocomplete and

spelling corrections.


Confidential

10. IMPLEMENT FILTERS TO

IMPROVE SITE SEARCH

USABILITY

Offer filters to help users get what they need from search, but

make sure users can’t filter a search to return zero results.


Confidential

11. GUIDE USERS TO BETTER SITE

SEARCH RESULTS

If your offerings can be easily narrowed by segment, asking a

few questions upfront helps ensure visitors see relevant

results.


Confidential

12. LET USERS EXPLORE BEFORE

THEY COMMIT

Allow visitors to use your site without registering for an

account.


Confidential

13. LET USERS PURCHASE AS A

GUEST

Offer the option to check out as a guest, and encourage

registration with tangible benefits.


Confidential

14. USE EXISTING INFORMATION

TO MAXIMIZE CONVENIENCE

Take advantage of information you already have, and/or use

third-party payment services to make conversion as easy as

possible.


Confidential

15. USE CLICK-TOCALL BUTTONS

FOR COMPLEX TASKS

Offering a prominent click-to-call button can keep users from

dropping out of the funnel when they need to provide

complex information.


Confidential

16. MAKE IT EASY TO FINISH

CONVERTING ON ANOTHER

DEVICE

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


Confidential

17. STREAMLINE INFORMATION

ENTRY

Offer users a number pad for fields requiring number entry,

and automatically advance them through form fields as they

input information.


Confidential

18. CHOOSE THE SIMPLEST INPUT

METHOD FOR EACH TASK

Consider if a toggle or dropdown menu is the optimal choice

for each entry on your mobile forms, and always make sure

they’re easy for users to tap.


Confidential

19. PROVIDE A VISUAL CALENDAR

WHEN SELECTING DATES

Keep visitors on your site by offering date selection via a

visual calendar with clear instructions.


Confidential

20. MINIMIZE FORM ERRORS WITH

LABELING AND REAL-TIME

VALIDATION

Use clearly visible labels to let users know what you need,

and validate for errors in real time to let them know if there’s

a problem before they submit a form.


Confidential

21. DESIGN EFFICIENT FORMS

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


Confidential

22. OPTIMIZE YOUR ENTIRE SITE

FOR MOBILE

Your site is easiest to use if all your pages are designed for

mobile.

Responsive design is Google's recommended design pattern.


Confidential

23. DON’T MAKE USERS PINCH-

TO-ZOOM

Visitors can miss calls-to-action if they have to zoom in a site.

Design your site so that they never need to.


Confidential

24. MAKE PRODUCT IMAGES

EXPANDABLE

Include high-quality closeups of key images like product

photos.


Confidential

25. TELL USERS WHICH SCREEN

ORIENTATION WORKS BEST

Communicate to users if your site works best in a certain

orientation, but ensure your important calls-to-action can be

completed regardless of orientation.


Confidential

26. KEEP YOUR USER IN A SINGLE

BROWSER WINDOW

Ensure your calls-to-action stay in the same browser window,

and add functionality to your site that addresses why

consumers might switch windows.


Confidential

27. AVOID “FULL SITE” LABELING

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


Confidential

28. BE CLEAR WHY YOU NEED A

USER’S LOCATION

Always make it clear why you need a user’s location, and

how the information will influence their experience.


Confidential

1 . About me



-CASE 1

-CASE 2

-CASE 3

-Another rules


Confidential

CASE 1


Confidential

Heat map


Confidential

Delete extra links on header and

footer

They 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!


Confidential

CASE 2


Confidential

Bridal site


Confidential

Adopt after page 11 rules, lead to

twenty two times up

Twenty two

times up!


Confidential

1. Don’t divide the input box


Confidential

2. Users are able to input whichever

Half angle or Em


Confidential

3. Use alert pop up to keep users

stay on the site


Confidential

4. 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,


Confidential

5. Try Input form as minimum as

possible


Confidential

6. Show step navigation on the

input form


Confidential

7. background color should be

changed while inputting data


Confidential

8. Show 「ok」「✔︎」easily when

users complete each section


Confidential

9. Show “Required” if it’s required.


Confidential

10. Show the example input word in

the form


Confidential

11. Don’t put reset button


Confidential

CASE 3


Confidential

Bridal site for mobile


Confidential

1. Delete Input items as much as

possible

This 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!


Confidential

Another rules


Confidential

1. Element should be bigger than

pc

The figures indicate that that the greater part user feel stress when

they use small elements on mobile according to the survey results

by d2d inc. To avoid this stress is simple to show bigger elements.


Confidential

2. Show the input form in the first

view


Confidential

3. Divide the page, don't scroll


Confidential

4. Don’t be Scaling


Confidential

5. Show the phone number on input

form page


Confidential

Thank you!