Ashu Tomarashu@knoldus.com

Principles of Site Design

Agenda

1. Home Page And site Navigation

2. Site Search

3. Commerce And Conversion

4. Form Entry

5. Usablity and Form Factor

Responsive Web Design Basics

The use of mobile devices to surf the web is growing at an astronomical pace, but unfortunately much of the web isn't optimized for those mobile devices. Mobile devices are often constrained by display size and require a different approach to how content is laid out on screen.

Keep calls to action front and center• It can be easy for mobile users to miss menu items, so always put your key

calls-to-action where you know users will see them.

Keep menus short and sweet

An extensive menu might work well for your desktop site, but mobile users won't have the patience to scroll through a long list of options to try and find what they want. Consider how you can present the fewest menu items possible.

Make it easy to get to the home page

When mobile users navigate through your site,

they want an easy way to get back to your initial

homepage.

For example, they may want to get back to do

another search or start a new browse experience.

Don't let promotions steal the show

• Promotions and ads can overshadow the content they're next to, and make it harder for users to accomplish tasks.

Make site search visible Users looking for specific information usually turn to search - so search should be one of

the first things mobile users see on your site, avoid hiding it behind a menu. In the study, participants responded best to easily-visible, open text search boxes at the top of a page.

Ensure site search results are relevant Search should be smart, providing users with the best and most relevant results so

they don’t have to swipe through multiple pages of results.

Implement filters to narrow results

Provide easy to use filters to help narrow the search results to more relevant results for users.

Guide users to better site search results

For sites that serve diverse customer segments, it can be helpful to ask users a few questions before they search to ensure they get results from the most relevant content segment.

Let users explore before they commitRequiring login or account creation too early in a site experience can be detrimental to conversion.

Let users purchase as a guest

Offer the option to check out as a guest, and encourage registration with tangible benefits.

In a research study, participants didn’t necessarily want to commit to creating an account with the retailer. Participants described the guest checkout as “convenient”, “simple”, and “easy [and] quick”. They were annoyed at a site that required registration to purchase, especially

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.

For your registered users, remember and pre-fill their preferences. For new users, offer a third-party checkout service they may already use. Several retail sites in the study offered third-party payment services as an option, reducing purchasing friction for users of those services and allowing the site to pre-fill shipping info.

Make it easy to finish on another View

Offer an easy way to save or share information across devices, for example provide a way for users to share items across social networks or to email a link directly within the site itself.

Choose the best input type

Users appreciate websites that automatically present number pads for entering phone numbers, or automatically advance fields as they entered them. Look for opportunities to eliminate wasted taps in your forms.

Url

For entering a URL. It must start

with a valid URI scheme, for

example http://, ftp:// or mailto:

email

For entering email addresses, and hints that the @ should be shown on the keyboard by default. You can add the multiple attribute if more than one email address will be provided.

email

For entering email addresses, and hints that the @ should be shown on the keyboard by default. You can add the multiple attribute if more than one email address will be provided.

SearchA text input field stylein a way that is consistent with the platform's search field.

NumberFor numeric input, can be any rational integer or float value.

Provide visual calendars when selecting dates

Users often need more context when scheduling appointments and travel dates, to make things easier and prevent them from leaving your site to check their calendar app, provide a visual calendar with clear labeling for selecting start and end dates.

https://developers.google.com/web/fundamentals/principles/

References

Thanks