HCI and Mobile Design

Shneiderman’s 8 Golden Rules • Strive for consistency – menus, prompts and commands should be consistent throughout the application.

• Enable frequent users to use shortcuts – as the user gets more comfortable with the software they would like to reduce the number of interactions they perform. The user should be able to use shortcut keys to perform actions.

• Offer informative feedback – for every action the user needs to take there should be system feedback. This feedback should tell the user exactly what is happening at this stage.

• Design dialog to yield closure – the actions a user needs to perform should be grouped into beginning, middle and end. The end feedback should promote closure.

• Offer simple error handling – the system should not allow for serious error. In the case of an error the user should be given an option to resolve the error.

• Permit easy reversal of actions – if the user knows an error can be undone it will make them more comfortable to explore options.

• Support internal locus of control – design the system to ensure users are the initiators of actions and not the responders. Experienced users like to feel in control of the application.

• Reduce short-term memory load – reducing the need for users to remember user

Why all the Fuss: What has changed?

• Touchscreens:– What is it about touchscreen phones that we

love?– Feedback

• Touchscreens offer a way to directly manipulate on-screen objects,

• Previously driven through a keyboard, mouse, joystick, or other input device.

Touchscreen

• The touchscreen model of direct manipulation– Has a large impact on the way we think about our

user interfaces as developers– Changes the expectations a user has for the

application• Touchscreen devices require us to stop

thinking in terms of forms,• Now we think about object-oriented user

interfaces.

Touchy Subject

• Most Android devices have a touchscreen – but it is not a requirement!

• Quality of touchscreens varies widely– Pretty much in direct proportion to the true cost

of the device

Smartphone Challenges:

• You generally don't have a mouse• You may have more than one pointing device• You often don't have a keyboard• Any keyboard that does exist may be a

software keyboard• A software keyboard may consume some of

your application's screenspace

The rule of the finger

• The first restriction placed on any touchscreen user interface is the size of the human forefinger,

• Microsoft call this the ‘Fat Finger’ limitation.• On a touchscreen device, you can't rely on

pixel-perfect precision. – You need to make sure that when the user touches

a widget, or object they make contact, and they don't accidentally touch another widget or object.

Touchscreens and UI Design

• Another impact touchscreens have on user interface design is that an application and all the widgets that it uses must be entirely self-explanatory (even more than usual).

• Far too often, we substitute good user interface planning and design with a roll-over or tooltip to indicate functionality.

• Sloppy practice and, anyway, no longer possible

Screens and Pixels

• Smaller screens have fewer pixels than larger screens!

• Don’t give the user information they don’t want (or don’t need)

• Don’t ask the user for any information that you don’t really need.

Key Design Principles

• Consistency• Recycle your UI• Simplicity• The ZEN approach• Use hidden menus• Use Transparency• Feedback • Location and Navigation• The Road to Recovery

Consistency

• This is the cornerstone of good user interface design. A button should look like a button.

• Make sure that the layout of each screen has a relationship with every other screen in your application.

• Don’t mistake this principle for "stick to the platform look and feel".– Look and feel is important,– consistency mostly applies to the layout and overall

experience of the application, rather than the colour scheme.

Recycle your UI

• The easiest way to maintain a consistent user interface, is to recycle as much of it as possible.

• At first glance, this suggestion looks merely like a "good object-oriented" practice.

• However, a closer look will reveal ways to reuse graphical widgets in ways you hadn't thought of. – By changing the visibility of various widgets, – or you can reuse an edit screen to view list items of

the intended type.

Simplicity

• This is especially important in a phone-based application.

• Often, when a user encounters a new application, it's because they are looking for something.

• They may not have the time (or the patience) to learn a new user interface.

• Make sure that your application asks for as little as possible, and guides the user to the exact information they want in as few steps as possible.

The ZEN approach

• Generally, when you are using a mobile device, your time is limited.

• You may also be using an application in less-than-ideal circumstances (perhaps, in a train). The lesser information a user needs to give an application, and the lesser they need to absorb from it, the better.

• Stripping away options and information also leads to a shorter learning-curve.

Use hidden menus

• A very useful feature of Android is the hidden menu structure.

• The menu is only visible when the user presses the "Menu" button, which would generally mean, they're looking for something that isn't currently on the screen.

• Typically, a user shouldn't need to open a menu. • However, it's a good way of hiding advanced

features until they are needed.

Use Transparency

• Windows Phone 8 SDK supports transparency• This can be used to effect (Opacity

Feedback

• Feedback is what makes a touchscreen device exciting. When you drag an object, it sticks to your finger across the screen until you let go of it.

• When the users puts their finger on your application, they expect some reaction. However, you don't want to get in their way—

• Instead of showing an error message when they touch a button, disable the button until it's valid to use, or don't show it at all.

Location and navigation

• When you're in a place you've never been to previously, it's easy to get disoriented, or lost.

• The same is true for a piece of software. Just because the application makes sense to you, the developer, it doesn't mean it seems logical to your user.

• Adding transition animations, breadcrumbs, and progress gauges help the user to identify where in the application they are, and what's happening.

The Road to Recovery 1

• A common way to tell users that something is wrong on a desktop application, or on the web is to open an error dialog.

• On a mobile device, people want smoother use of an application.

• While in a normal application you may inform the user that they selected an invalid option, in a mobile application, you generally want to make sure they can't select that option in the first place.

• Also, don't make them scroll through huge lists of options.• Instead, allow them to filter through the list using an auto-

complete or something similar.

The Road to Recovery 2

• When something goes wrong, be nice, and be helpful—

• don't tell the user, "I couldn't find any flights for your search".

• Instead tell them, "There were no available flights for your search, but if you're prepared to leave a day earlier, here is a list of the available flights".

The Road to Recovery 3

• If there is no network connection, the app should provide an appropriate warning. You can use Airplane mode to test your warning.

• Verify that the app can still be navigated when there is no network available. Although there may be no data coming in, navigation of the app should still be functional.

• If a network outage interrupts a feature or operation, always let the user know what’s wrong.

The Road to Recovery 4

• Ensure that your user can always take another step forward without having to go “back’

• However, the option to go back should always exist.

Windows Phone 8

• Strong Design Principles:• Horizontal Right-left-right scrolling is more

intuitive than Vertical scrolling.• The panorama Control• The Pivot Control

Windows Phone Pivot Control

The pivot control supports the following gestures and navigational effects:• Horizontal pan (tap and drag left/right)• Horizontal flick (tap and swipe quickly

left/right)• Navigating hosted controls—for example,

links can be tapped and lists can be scrolled

Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

Provides a quick way to manage views or pages. It can be used for filtering large datasets, viewing multiple data sets, or switching app views. For example, flicking or panning left to right on the page advances to the next page of content.

Pivot Control: Microsoft Windows Phone 8

Panorama Control

Panorama: Developer Support

• The Windows Phone panorama experience comes with built-in support for touch interaction and navigation.

• You do not have to implement any special gesture functionality in your app because it is enabled by default.

• The panorama experience supports the following gestures and navigational effects:– Horizontal pan (tap and drag left/right)– Horizontal flick (tap and swipe quickly left/right)– Navigating hosted controls—for example, links can be

tapped and lists can be scrolled

Windows Phone 8 UI “Rules’’

• The UI should use white space to effect• Content not Chrome• Clean: Not cluttered• Full screen is the only scenario. – (Use all of the screen)

• Symbols, not Words– The Metro Design Principle

Content Not Chrome

• aa

Too much Chrome

Clean and easy to Interact with:

Feel-Good Usability

Full-screen: iOS Example

Almost Full-Screen

Use the Full Screen

Spot the Difference

Symbols not Words:

• Metro Design Concept

Metro Design Language:

Support for Commercial Exploitation:Advertising on Tiles: Tiles can have lots of ‘faces’

Microsoft: Platform-Convergence Concept

Using a common UI model and ecosystem creates complete end-to-endscenarios:The experience follows and exploits the available device capability.

Guidelines from the Industry

• The Software Development Giants:• Google Android• iOS (Apple)• Microsoft Windows Dev Center– Manufacturers:– Nokia– Samsung– Blackberry – Motorola

Developer Guidelines: Google Android

• http://developer.android.com/design/get-started/creative-vision.html

• • http://developer.android.com/design/get-started/princip

les.html• • http://developer.android.com/design/get-started/ui-ove

rview.html• • • http://developer.android.com/design/style/index.html• • http://developer.android.com/design/style/devices-displ

ays.html

Developer Guidelines: Apple iOS

• https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/

Developer Guidelines: Windows Phone 8

• http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff967556(v=vs.105).aspx

• • http://dev.windowsphone.com/en-us/design

Developer Guidelines: Nokia

• http://developer.nokia.com/resources/library/Lumia/designing-for-windows-phone.html

• • http://developer.nokia.com/lumia/lumia-app-l

abs

Traditional Key Concepts which must Pervade the Design

• Usability Principles– Learnability

• The ease with which new users can achieve effective interaction and maximum performance

– Flexibility• Multiple means for interaction

– Robustness• Supporting the user to determine successful achievement and

assess goal-directed behaviour

These are broken down into a myriad of detail in traditional HCI modules.But…do they all still apply? Are they getting out-of-time?

Case Study Challenge: 1Shneiderman in the Context of Apps

• Revisit Shneiderman’s 8 Golden Rules

– Which rules still apply?– Which rules apply but require modification?– Do any rules no longer apply?– Do we need new rules for Mobile Apps?

Case Study Challenge: 2

• Think about the HCI challenge• What are the new rules;• Could you suggest a new set of Mobile rules:• Think of specific examples of how HCI and mobility

are different from when apps were static on PCs• Consider the impact on the designer and the app

design process• Why is HCI arguably even more important now

than previously?

Interesting Perspective on Design? Simon Sinek on TED

• People don’t buy ‘What you do!”• They buy ‘Why you do it!”

• http://blog.ted.com/2010/05/04/how_great_leade/

(Duration: 16.47)

Mobile World Congress

• http://www.mobileworldcongress.com