Usability Study

@jimbolaDate: October 28th 2010

Contents

Research

What is 360

Target audience

Introducing the Samsung M1

Mini diary study

360 Apps & Widgets

360 User Interface design

Pattern inconsistencies

Improving 360

Usability/Conclusion

Firstly.................. Rese

arch

.....what is 360? Rese

arch

.....what is 360?

“....Vodafone 360 is a service, not a handset.

The Samsung M1 & H1 are just the first of

many 360-ready phones to come”

Rese

arch

Target audienceWho is Vodafone 360 aimed at?

Tech Savvy

Savvy innovators, early adopters and early majority

Data conscienceMore likely to use data sync and backup

Key influences

Advertising, sales staff, friends, ‘word on the street’

Vodafone says:

Rese

arch

Material from : Apps on Vodafone 360 (Vodafone Group 2010 – April)

Model Samsung M1 (i8320)

Screen resolution 240 × 400 pixels (3.2 Inches)16M colours

Screen type Capacitive (TFT)

Operating System

LiMo (Linux Mobile) R2.0.1

CPU ARM Cortex A8 600 MHz, PowerVR SGX graphics

Camera 3.15 MP

Data GPRS, EDGE, 3G

JIL Compliance Level

Bronze

Experiencing 360 through the M1 The Samsung M1 was used to research the 360 offering

Relatively light weight Fair battery life

! Use of plastic!!! Low resolution!!! No Wi-Fi connection

First impressions

Rese

arch

360 and the rest Placing the M1/H1 against competitors and level of customisation

High

Sense SmartL

ife MotoBlu

r

TimeScapeFriend

Stream

360

UI Layer

Social tools

Level of customisation

Nexus One Desire Galaxy-S Xperia X10 DEXT 360 M1/H1

Rese

arch

Mini diary studyMy experience of the M1 and 360

Rese

arch

Day 1

As this is a pay-as-you go tariff I needed to top-up the phone before being able to access any of the features.

!! It took 6 attempts to top-up, 4 times the service was unavailable, once the activity was interrupted by a welcome SMS, and lastly the touch keypad sent me on the wrong path.

!!! When topping up the keypad is needed to enter responses and the voucher code. A critical usability flaw was found at this stage as the keypad does not disable when holding the phone to your ear, and on 3 occasions my cheek accidently selected keys and placed me in the incorrect top-up journey. I only realised the keypad was active due to the vibration feedback as my face touched the screen.

Day 1 – Top-up/Activation

Using IVR/Touchtone Response

Mini diary study

“Top-up is unavailable please call back later”

Rese

arch

Day 2 – 360 Registration

Mini diary study

Information

Activating account...

Unable to sign up

Please try again

OK

Sign-up via the web www.360.com

Simple and intuitive registration process (mobile and web)

!!! Unable to register using the mobile after 4 attempts.

The registration process was simple, however after 4 failed attempts I resorted to the web registration. (Failed within a full 3G area after 4 attempts at different occasions).

Rese

arch

Notice that some of my contacts now have avatar images on the ‘People’ screen. Wonder why only 6 out of 35 are displaying?

Setting up email. Look to set-up my own email account so I can start sending and receiving mail. Navigate to apps, and select the icon with the envelope, realising I'm in the wrong area I hit back and select the ‘Email’ icon.

Unfortunately although there is a majority of popular web mail accounts available I am unable to create my own. Or set up my phone to use a POP/SMTP account.

Web email list is reached through 5 screens with duplicate call-to-action to ‘Add account.

Day 3 – Email Set-up

Setting up email

App screen

Email

Settings

Add account

Add account

Mini diary study

Rese

arch

360 Apps & Widgets

Rese

arch

360 Apps/Widgets are created using standard web authoring (XHTML, CSS and JavaScript) that use specific APIs that hook into the devices services. This gives 360 authors scope to create applications that reach existing compatible devices.

Stylus Pointer Focus Touch

Q WER T Y

Keypad

Apps support

Currently over 50 devices

Market positioning

High-end to mid-tier of the market

Supported UI

Touch screen, non-touch, QWERTY keyboard, T9 Keypad

Rese

arch

360 Apps & WidgetsCross-handset

support

Others

360 Apps/Widgets

M1/H1

Full customisation

360 Apps & Widgets

Rese

arch

Top 5 App downloads across Europe

Top 5

1 Facebook VF Quick-Check

Facebook Facebook Facebook Facebook Facebook Hyves

2 LED Scroller VodafoneMobileTV

LEDScroller

LEDScroller

LEDScroller

live! TVShow 360

LEDScroller

TV Gids

3 LightsOut wetter.com Flashlight LanguageTranslator

LanguageTranslator

LanguageTranslator

Hangman LEDScroller

4 Aquarium Schatzianrufen

AlcoholMeter

Informaciónde Trafico

PagineGialleMobile

AlcoholMeter

Four In ARow

Flitsers

5 Four in a row

Streichhölzerziehen

Tic Tac Toe Gol T Tirami il dito AnalogClock

LanguageTranslator

SearchLight

downloads from 360 launch to March 2010

Material from : Apps on Vodafone 360 (Vodafone Group 2010 – April)

Even with 360’s social capabilities the Facebook app remains top across Europe

360 Apps & Widgets

Rese

arch

Downloads by category

Most popular across markets is Lifestyle & Entertainment (with travel and navigation)

Top 5

Lifestyle & Entertainment

Price

1 Live Football £2.49

2 Barcelona (Rough Guides)

79p

3 Starlounge Free

4 DIG BMX Free

5 Hollyoaks FreeTop rated (UK) June 2010

Material from : Apps on Vodafone 360 (Vodafone Group 2010 – April)

Mobile App stores

360 Shop Android Market iPhone App store

Quick UI comparison (App list)

Rese

arch

Ability to filter (Date, Name, Rating) via context menu

Quick link to search

No indication of price

No indication of page/list length

Responsiveness is slow whilst scrolling (M1)

!!

!!

!!!

Ability to filter via tabs

Ability to view the price

Can see if the application is already installed

Responsive scrolling (HTC Desire)

Scrollbar indicates length of page/list

Ability to filter via tabs

Ability to view the price

Responsive scrolling (iPhone 3G)

Scrollbar indicates length of page

Rating includes frequency

Cannot see if the application is already installed

!!

360 User Interface design

Usa

bilit

y

Early concepts

Usa

bilit

y

Initial designs incorporate a timeline for viewing messages and facets for dynamic filtering. Unfortunately these features do not make it to the production design.

The key to this screen is to allow users to quickly filter across their contacts, enabling them to quickly surface comments and status updates.

Great concept for viewing aggregated contact detailsNot all avatars are carried across from FacebookDoes not update very often Group carousel is dependant on colour coding

!!!!!

Usa

bilit

y

360 UI Patterns

Pop-ups Tabs Page Drilldown Scroll bar

Useful and necessary

ImproveSome pop-ups are not confirmation but information, this pattern does not include a close option. The only way to close is to touch outside the area.

Useful and necessary

ImproveVisual impact could be improved to make the tabs standout and look less like titles.

Important when indicating underlying quantity

ImprovePattern could be used more often

Important when indicating where a user is in a list and the amount of content in a list

ImprovePattern could be used more often. Use within the M1 is inconsistent.

Light weight UE evaluation of UI interaction patterns used across Vodafone 360Includes Good, !! Bad and areas for improvement.

On/Off slider

Daylight saving timeoff on

switch has a familiar affordanceUse of colour makes it difficult to determine what state the switch is in (On or Off)

!!

Change colour and improve design to enforce switch state.

Usa

bilit

y

360 UI Patterns

Accordion Settings Menu

Back Carousel Command Bar

Content list Floating mode Live Scrolling Tool tips

Visual and Haptic feedbackSometimes appears in the Command Bar

ImproveAdd the name of the previous page/section (Signposting)

!Too subtle and can be missed

ImproveUse more conventional accordion design

! Common patternIncludes quantity of itemsSlow and judders on M1

ImproveImprove responsiveness and motion animation

!!

Sometimes accompanied with tooltipIconography can be difficult to decipher.ImproveAdd text and improve iconography (less is more)

!!

Common patternSlow response on M1

ImproveAlways include scroll to indicate length and current position in list

!

Disorientates grid layout, causing icons to more locationToo slow to appear making it unusable

ImproveRemove and replace with app icon feedback

!!

!!!

Better than paging Not used on the M1

ImproveUse this pattern on the M1, however does need a good connection speed to create the desired effect

!Helps describe an icon

ImproveWorks better as a non-touch (focus based) pattern. For touch include a visual clue that the area has a tooltip. Otherwise its guesswork.

Iconography & ColourStandout from the crowd!!! The use of monochrome Keyline icons make quick visual referencing slow

Application grid

The application grid displays pre-loaded applications and navigation points to key functionality.

Colour coding is used to classify usage types (e.g. Device settings are grey, camera/gallery is purple). However colour theme is not carried across to the respective areas therefore a common affordance cannot be established and classification is not instantly obvious.

Touch InteractionSingle flick left/right to navigate applications.Observation : smooth scrolling with closing bounce effect at the start and end.

Usa

bilit

y

Iconography

The 360 UI makes use of a large range of icons to inform and aid as navigation sign-posts throughout the device.

However the amount of icons and the lack of accompanying text means users have to take time to learn and study the device.

Also some icons are meaningful but others are open to interpretation.

Less is more!! With the over extensive use of icons and the devices low resolution the interface requires an amount of effort to learn.

!! Due to the choice of colour active and inactive icons are not immediately obvious.

Active Inactive

Tool Tips help to describe an icon.However they are rarely used and via touch a user has to test an area first to see if it has a tool tip.

Usa

bilit

y

Pattern Inconsistencies

Usa

bilit

y

Users form a mental model after successfully completing a task a number of times. It is important to support this by retaining a consistent experience though no mater what activity/task is carried out.

Normal

Bedside

Some implementations do not give a visual response on touch selection.(Example – Phone profile setting)

Touching the set-up icon will navigate the user to a new area, no feedback is relayed to the userTouching outside the set-up icon will select the ‘radio’ button

The scroll-bar is only displayed on a limited number of lists.

360 UI incorporates four separate activity indicators. It is best practice to keep this down to a single design or at the maximum two.

Please wait..

!! Activity indicators are not always displayed whilst content is being loaded

Animated activity indicator

Static, !! Is this inactive?

Usa

bilit

y

Pattern InconsistenciesActivity indicator

Pattern Inconsistencies

Usa

bilit

y

Slide to unlock End

Unlock

Stop

Inconsistent use of slide patterns

Used to unlock the phone by sliding finger left to right

!!! Different approach, colour has been added and two different techniques are required to unlock phone and end phone call

!! Now the slider handle is green and activated sliding from right to left.

Create one single design for the slider pattern, test it with users in context of a common task. Then implement the same pattern across the device.

Usa

bilit

y

Improving 360 Usability/Conclusion

• Overall the idea and 360 concept is a good one and meets current user expectations of social interaction on the move. However the desire for Vodafone customers to embrace a new social channel is some what wishful thinking. But at the same instance VF do not force this on their customers but offer this a subtle addition that can help aggregate multiple social channels.

• The absence of Twitter to the mix is a major setback and it is curious to see this has not been added as yet.

• The 360 UI design is simplistic and thus allows it to translate into Web Runtime widgets. There are however subtle differences when using an on device UI and Mobile app, which causes inconsistencies (e.g back button loses haptic vibration feedback).

Usa

bilit

y

Improving 360 Usability/Conclusion

• The sign-up and registration process was concise and usable, however I believe the underlying technology was preventing a successful registration, this must be improved so users can gain trust and acceptance from the first engagement.

• The 3D people client needs enhancing from a view of findability and up-to-date content. Once trust is lost users will bypass this screen and open up a Facebook app or find fixed-web access.

• The 360 lacks interaction patterns such as multi-touch, and although the animation effects are simple and effective there are no specific ‘wow’ factors that standout.

• Vodafone offer OTA software updates which will help future upgradeability. The upgrade process needs more attention however, as I received an SMS informing of an impending update, however 2 weeks on and this still hasn't happened.

Usa

bilit

y

Improving 360 Usability/Conclusion

• Key factors that will improve usability and reduce the need for a user to concentrate on the UI is by improving the Information Architecture by adding labels. The Interface design also incorporates far too many icons (less is more).

• The use of monotone iconography make the UI feel flat and each icon needs to be studied at every glance.

• The amount of applications on offer within the 360 Shop are limited and primitive in comparison to the iPhone and Google Market. Example games include ‘Rock, paper scissors, Mine-sweeper and Tic-Tac-Toe’, all of which have little visual design.

These apps will improve however it will be interesting to see if games can improve with a small footprint (Max 3MB).

• 360 adds reassurance to users though the seamless contact back-ups facility that is integrated as part of 360.