Device research by Kristen Chon

July 25, 2013

Device Research AGENDA ITEMS: Overview of: “View more” icon on tablets “Alerts” and “Toasts” Best practices for a customer review form on a tablet

! ! ! ! ! !

.biz

Device Research

Options to View More and Continue  Make text links stand out Most popular method of presenting “View more” links is with simple text !

This is usually done with a link that is underlined, bolded, brightly colored and sometimes marked with a >sign

.biz

Use icons When text alone isn’t sufficient, add an icon !

It can help draw attention to a particular part of the layout

Use buttons If you want your “View more” link to standout, use a button. Use them in moderation because too many buttons can overwhelm the audience. Source: Dawg House Design Studio

© 2010 AT&T. All rights reserved. AT&T, the AT&T logo and all other AT&T marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All other marks contained herein are the property of their respective owners.

Device Research

3 Ð

“View more” and “Continue” Options  Trends 1

Text-only links were used more than any other type of “Read more” link by a ratio of almost 2 to 1

Most websites used the wording “Read more” or some variation of it

Text-only links or text combined with an icon were used mostly on blogs, while buttons were used primarily on commercial websites Source: Smashing Magazine

.biz

Device Research

4 Ð

“View more” and “Continue” Options  Advantages 1

Use AJAX to quickly load additional results. The rest of the page stays in place

Offers a single unambiguous choice

Allows for a user to view all choices at once, without straining the page load; simply requires clicking the button multiple times Source: Orbit Media

Is non-visually intrusive

.biz

Device Research

5 Ð

“View more” and “Continue” Icons  Common Examples

Source: Smashing Magazine

.biz

Device Research

6 Ð

“View more” and “Continue” Icons  Other Examples

Source: Smashing Magazine

.biz

Device Research

7 Ð

Alerts used in iOS  Overview Display either a screen or an alert if the app’s features are unavailable Display the alert only when people try to access the feature that isn’t functioning Warn users about the consequences of deleting document When user deletes a document in an iCloudenabled app the document is removed from the user’s iCloud account and all other devices.

A local notification is schedule by an app and delivered by iOS on the same device For example, a calendar or todo app can schedule a local notification to alert people of an upcoming meeting or due date

An alert is a standards alert view that appears on screen and requires user interaction to dismiss You supply the notification message and, optionally, a title for the action button in the alert.

To be useful a local or push notification message should Avoid telling people which button to top or how to open your app Alert can contain one or two buttons In a two-button alert, the Close button is on the left and the action button (titled View by default) is on the right.

Tapping the action button dismisses the alert and launches your app Tapping the Close or the OK button dismisses the alert without opening your app Source: Apple iOS guidelines

.biz

Device Research

8 Ð

Toasts used in Android Overview Provide lightweight feedback about an operation in a small popup For example, navigating away from an email before you send it triggers a “Draft saved” toast to let you know you can continue editing later.

Provides simple feedback about an operation in a small popup It only fills the amount of space required for the message

Toasts automatically disappear after a timeout Deliver unobtrusive status message to users Good for displaying notifications that don’t need too much attention

.biz

A standards toast notification appears near the bottom of the screen Current activity remains visible and interactive Source: Android Developers

Current activity remains visible and interactive

Device Research

9 Ð

Customer Review forms for Product Review  Overview Include the “why” The best reviews include not only whether you liked or disliked a product, but also why.

Not too long, not too short Written reviews must be at least 20 words and are limited to 5000 words. Th ideal length is 75 to 500 words.

Be specific Your review should focus on specific features of the product and your experience with it.

Be sincere Give honest opinion about the product, positive or negative.

.biz

Full disclosure If you received a free product in exchange for your rview, clearly disclose that you received the product free of charge. Source: Amazon General Review Creation Guidelines

Device Research

10 Ð

Customer Review forms for Product Review  Guidelines 1

Brief Introduction 2-3 sentences

Provide Pros in a bullet list form (at least 3) For example: •Easy to use •Low cost •Used by professionals

Provide features at a glance in a bullet list form For example: •Steel and carbon fiber design •Five hand grips •No dangerous fumes

Paragraph 1 Write it product keyword in it !

Paragraph 2 Write it with Latent Semantic Indexing (LSI) words (keyword synonyms and related terms) !

Paragraph 3, Paragraph 4 If needed 4

Provide Cons Pick a minor fault and have a remedy for it and include variant of keyword phrase. !

This area may describe a deluxe version or accessory that offers the remedy

Link to product and reviews Specify where to buy/Click here to buy !

Specify where to read reviews/ Click here to read review Source: Blogs News Reviews

.biz

Device Research

11 Ð

Improve Usability on Tablets  Guidelines 1

Increase the size and margin for buttons and calls-toaction The average width of the index finger for most adults translates to about 45-57 pixels

Increase font sizes for legibility Bumping up font sizes by a couple of pixels can make a difference ! 4

Ensure links and calls-toaction look tap-able without hover states Hover states do not exist on a tablet. Style your text links to use a clear contrasting color

Increase padding around navigation menu items Try increasing padding by 5-10 pixels to start, or more if your design allows

Increase margins on pages and content blocks This improvement supports overall legibility and reduces visual complexity. Increased “white space” can result in the impression that your website’s content is easier to consume

Increase form field size and spacing Make it easier for your visitors to tap and enter information into form fields. Improvements to your forms may make the greatest impact to your conversion rate Source: UX Magazine

.biz

Device Research

12 Ð

Customer Review Form  Samsung Product Ratings Divides into Overall rating, features, performance, design, and value. It also includes a recommendation-to-a-friend question

Overview General description/opinion with pros and cons listed out for the user to select from. The note section explains writing guidelines

Media Option Alternate option to writing a review, user can upload a video. The note section explains media guidelines

Video An option to attach a video along with the review

Personal Provide Nickname* (For privacy reasons, don’t disclose real name), location, how long the product has been used, how the user would describe his expertise, and how many Samsung products the user currently owns.

Rate for internal use only 1 to 10 scale of recommendation-to-a-friend selection and explanation

.biz

Device Research

13 Ð

Customer Review Form  Amazon

Provide nickname/pen name For privacy reasons, don’t disclose real name

Rating On a scale of 1 to 5 stars

Title

Select review type Choose between video and written review. Written reviews should contain at least 20 words. Insert a product link Insert a product link by browsing through Amazon

.biz

Device Research

14 Ð

Form Input on Tablet  Examples

Provide nickname/pen name For privacy reasons, don’t disclose real name in a review form

Radio buttons To provide users with a limited number of choices, so it’s easier to make a selection

Source: Readability

.biz

Device Research

15 Ð

Form Input on Tablet  Examples

Clear current selection Distinct color coding allows users to know what step they are on

.biz

Device Research

16 Ð

Form Input on Tablet  Examples

Question and answer Ideal for summaries with paragraphs

Tab Navigation Ideal for dividing different sections of the review form Input Ideal for summaries with paragraphs

.biz

July 25, 2013

Thank You

.biz