Interface usability-adding-schweppervescence-ver3-8

transcript

Interface Usability Adding Schweppervescence

Adam Cogan

Chief Architect at SSW

Microsoft Regional Director

@AdamCogan

Future Thinking. Immediate Results.

Agenda General Usability Practices

Windows Apps

Popups and Message Boxes

Controls and Forms (Windows and Web)

Reports

Web UI

Mobile interfaces

Controversy!

Technology is intimidating. People are afraid to break the system or lose the data.

Encourage experimentation, increase comfort

Have reversible actions (Undo)

Previewed actions

Avoid dialogs unless there’s a system error (not user error)

Track user preferences and defaults, *remember recent*

Comfort of Learning

What is good UI?

A good UI just works the way you expect

There are no surprises

There is no need to use help

Intuitive

Feels fast

Eg. No white screens, threading code

Consistent

No clutter – not busy…

A good UI is...

Minimal “modal” popups

Good error handling

Easy to customize + apps (aka a platform)

Gamification eg. Badges

A good UI is...

Stack Overflow

http://channel9.msdn.com/achievements/visualstudio

Visual Studio Achievements

Good UI:

Chief Architect at SSW

Developing custom solutions for businesses across a range of industries such as Government, banking, insurance

Microsoft Gold Partner

Microsoft Regional Director

VSTS MVP

@AdamCogan

About Adam

1. General Usability Practices

Do you intuitively know how to use something?

A thermostat

Less is more

The importance of Defaults - Aim for 'Next', 'Next', 'Next‘

Hide advanced options, but make them easy to find!

Do you realize that when it comes to interface design 'less is more'?

You’re late for a flight and you need to check in

Do you realise people scan, not read?

Google: SSW storyboarding

Do you know to use storyboards?

Is your data easy to search?

What is more important than search?

Eg. http://www.microsoft.com/presspass/features/2011/jun11/06-01corporatenews.aspx

Windows 8 live tiles - metro

Do you consider optical alignment?

And now…

iSlate

iSlate….

IsLate?

Do you make matrix columns as simple as possible?

What about Columns or Text?

Columns are easier to scan

Use when comparing data, or need ordering

Text is aesthetically pleasing

What about Columns or Text?

Make it more than just navigation

Put useful current information on the homepage

E.g. Top billing customers for the month and a button under it for adding an invoice

E.g. See the number of bugs counted by the most common

Do you make the homepage a portal?

Do you think this rule is limited to web UI?

Can see what functions are being used more often (e.g. reports, menu items)

To work out what fields to show on search pages (standard and advanced tabs)

Know which parameters are being used

Do you log usage?

Put all options in even if some aren’t selectable

Let’s look at two examples:

Checkbox

Image…

Include extra information if it gives you context

A good app should…

Encourage experimentation to increase comfort: Undo Remember your last state Live preview

Live previews

Auto save records

Prompt to save the record when the user leaves a page that has been modified

When the user logs back on prompt them that they have drafts

E.g. mail.google.com

Do you use the concept of drafts?

I have a dream

Help - Do you have a wiki for each page or form?

Help - Do you help users when they get errors by directing them to a wiki or KB?

http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces.aspx

Lots more:

2. Windows Applications

Training Videos

Online User Guide

Knowledge Base

Make a Suggestion

Report a Bug

Check for Updates

Run Unit Tests...

About [Product Name]...

Menu - Do you know the 8 items every "Help" menu needs?

Menu - Do you have a "Help | Training Videos" item?

Easier to keep up-to-date and maintain

Stats on usage

Allows community commenting

Menu - Do you have your "Help | User Guide" online?

Menu - Do you include a "Tools | Validate Data"?

Don’t give descriptive information about the page

Give the user instructions on how to use the page

Bad example - This page allows you to define a search

Good example – To start a search choose an option to

the left

Give Instructional Help

http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Windows-Application.aspx

Lots more:

3. Popups and Message Boxes

When good sites go bad…

Not even Apple could make

the popup less annoying

Do you avoid message boxes?

Only use them in the following scenarios:

Confirming the deletion of a record Kicking off a long running process

Do you avoid message boxes?

Is it ok to cancel?

Do you use messages that are concise and informative?

Microsoft uses this one

Do you use messages that are concise and informative?

Some people like popup forms.

Some do not.

Vote – What about popup forms?

You can’t read or edit content behind

Long loading times – ask CRM4 users!

Popup modal forms are no good

Obvious you have an action to take

Simplify a form

Doesn’t get lost behind another window

Can dim the background for focus

Popup modal forms are good

Should this be a popup?

Who likes popup forms?

Re-vote....

http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterInterfaces-Popups-and-Messages.aspx

Lots more:

4. Controls and Forms (Windows and Web)

Less is more!

Select all should be “-All-”

Note: if you want to select nothing then add an entry to the dropdown for (null)

Do you know how to label dropdown lists?

Rule #9

http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterBusinessIntelligence .aspx#AllDimensionsTag

When you use a combo box, it's very helpful to be able to see at a glance how many results can be expected

Do you include the number of results in drop down list?

What if user wants to sort by either alphabetical or numerical?

What’s a better way to do this???

Radio buttons…

users know it is data, not a label of the application

users can copy and paste from the field

Do you use Text Boxes for displaying data?

Which is better?

A: Neither, use a checkbox!

What’s wrong with this?

Better Example

Checkboxes

1 option – eg. yes/no, on/off Multiple simultaneous options –

e.g. Eggs and Bacon and Tomato

Radio buttons

2-3 exclusive options – e.g. Coke or Pepsi

Drop down list

3+ exclusive optionse.g. Favourite SSW employee

Guidelines – when to use what?

Do you disable buttons that are unavailable?

A plain textbox limits the detail of the user's notes

For multi-line textboxes (e.g. Descriptions, Memos, Notes)

Allows you to use:

Links formatting (bold, underline, etc.) bullet points and numbering

Do you know when to use rich textboxes?

http://demos.telerik.com/silverlight/#RichTextBox/MSWord (Telerik)

Telerik rich textbox

Helps the user enter more data related to that field

Should call a popup form

Do you use ellipses buttons?

Click icon to add picture

http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Controls.aspx

Lots more:

6. Reports

A display containing more than four perceptual units of information cannot be understood at a glance

Do you make graphs easy to digest?

http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Reports.aspx

Lots more:

7. Web UI

Do you follow the “Banana Rule”?

How do you get a monkey pay attention to something?

A:/ You could lure him by tempting him with a banana.

The principle is.... Once we have the monkeys attention focused on the banana, he will try to get his hands on it!

Treat your users like monkeys!

Bad banana!

How do I know where I am?

Do you know to use Breadcrumbs?

Note the links.... What is the exception? ....

But don’t link to yourself!

If you’re on the homepage, there’s no point having a link to the homepage

If you have a breadcrumb, don’t link to the current page

SharePoint

Underlines are only used for links!

This does NOT mean all links should be underlined

Always have a *rollover* effect

You should indicate *visited* links.

Do you know the correct way to display a hyperlink?

Via CSS ...

Do you know the correct way to display a hyperlink?

Rollover effect

Visited links

Normal links

Must be in this order!

If a link is to an external site, a visual indication should be provided to the user like this:

This should be done via CSS or jQuery

Hyperlinks - external

Via CSS:

Custom for SSW

Filters image links and other parameters

Via jQuery

‘CSS is manual’

‘JQuery is automatic’

Content heavy websites with large archives – are you really going to go back and add a class to each link??

Via jQuery

Warning: Corneliu the god of performance warns against this recommendation because

CSS is fast jQuery is slow

TODO: The next step is to verify this via a VS 2010 Ultimate Coded UI test!

Via jQuery

Warning: Not mainstream

HTML 5 does not have the TARGET

On the purchase page add “terms and conditions (opens in a new window)”

http://www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsitesNavigation.aspx#ManageExternalLinks

Should external links open in a New Window?

http://www.ssw.com.au/ssw/Events/Scrum-Training-Course.aspx

Do you save clicking through?

http://www.ssw.com.au/ssw/Events/Scrum-Training-Course.aspx

Do you save clicking through?

Do you indicate which fields are required?

Prevents a wasted trip to the server

Should get the required fields right the first time around

http://www.ssw.com.au/ssw/standards/rules/RulestoBetterInterfaces-Controls.aspx#CorrectValidationFocus

Do you use icons in web pages to indicate status directly?

For Validation Errors, don’t assume they have to read a messagebox

Automatically focus on the control

Note: Balloons also direct the eye…

Do you use SetFocusOnError on controls that fail validation

What’s important

Do you have a consistent search results screen?

A statement that explains the criteria

Pages navigation

Number of results found

Filters at the top

Do you have a consistent search results screen?

Do you always give more information under “Did not match anything”?

Websites are continually saying ‘404 – page not found’ or ‘your search did not match anything

This should be avoided

Use SSW Link Auditor (www.ssw.com.au/ssw/LinkAuditor)

Broken Links are inexcusable!

Master pages

Do you know the two things to create a consistent look and feel?

www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsitesNavigation.aspx

Lots more:

6. Mobile Interfaces

First impressions: You only get one shot

First impressions

Better to have a Porsche UI and a VW engine

than a VW UI and a Porsche engine.

Of course you want a Porsche UI and a Porsche engine, but...

When do you build a iPhone app vs iPhone web app?

Depending on

budget usage of native API existing web app and just add CSS

Note: An iphone (or WP7.5) web app without a network connection, will not load the web page you were on previously

iPhone app vs iPhone Web app

When do you build a WP7.5 app vs an iPhone app?

A: If your app is build on Silverlight today.

Time to market Lower $ Reuse MVVM Reuse Silverlight controls Reuse the Business and Data layer

WP7.5 app vs iPhone app

The biggest thing going for Windows Phone 7.5 is:

.NET dev shops environment more productive than xcode

Note: WP7 is built on Silverlight 3

Note: WP7.5 is built on Silverlight 4

Note: WP7.5 was built by a "web team" not "Rich client app team", so some issues exist:

Avoid using System.Windows.Browser.dll in your Silverlight App (as it works only OOB on desktop)and you will have to use a different control on Windows Phone 7.5

Others reasons are:

You can deploy your app without going through the appstore/market place. E.g. my SSW business app

Appstore: No

Market place: Yes (hidden)

Turn around through the appstore is quicker:

Appstore: 1-3 weeks

Market place: 2 days

(Quicker since it is managed code. Unmanaged code is easy to spot)

App store is more aggressive in blocking apps

Do you know what guidelines to follow for WP7.5?

Interaction guide from MS (whitepaper)

http://social.msdn.microsoft.com/Forums/en/windowsphone7series/thread/7365b3c6-9fdc-48fe-bf17-192c71f2a49f

Tip: if you’re writing your own user controls, you’re probably doing it wrong

Silverlight.CodePlex.com

www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Mobile.aspx

Lots more:

7. Controversy!

Well, we had a few in the presentation...

Technology is intimidating. People are afraid to break the system or lose the data.

Encourage experimentation, increase comfort

Have reversible actions (Undo)

Previewed actions

Avoid dialogs unless there’s a system error (not user error)

Track user preferences and defaults, *remember recent*

Comfort of Learning

Rules to Better Interfaces

http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces.aspx

Rules to Better Website Layouts

http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesLayout.aspx

Resources

Summary General Usability Practices

Windows Apps

Popups and Message Boxes

Controls and Forms (Windows and Web)

Reports

Web UI

Mobile interfaces

Controversy!

Thank You!

Sydney | Melbourne | Brisbane | Adelaide

info@ssw.com.auwww.ssw.com.au

Find me on Slideshare!

http://www.slideshare.net/SSWConsulting/