187
Interface Usability Adding Schweppervescence Adam Cogan Chief Architect at SSW Microsoft Regional Director @AdamCogan Future Thinking. Immediate Results.
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!
Future Thinking. Immediate Results.
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
RTFM
Future Thinking. Immediate Results.
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...
MSDN
Stack Overflow
http://channel9.msdn.com/achievements/visualstudio
Visual Studio Achievements
Good UI:
Future Thinking. Immediate Results.
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
Future Thinking. Immediate Results.
1. General Usability Practices
Future Thinking. Immediate Results.
Do you intuitively know how to use something?
A thermostat
VS
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'?
Future Thinking. Immediate Results.
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?
TOUCH
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?
Bad
Good
…
And now…
iSlate
iSlate
iSlate….
IsLate?
Do you make matrix columns as simple as possible?
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?
Future Thinking. Immediate Results.
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!
Good
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?
What’s wrong with this?
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?
Do you use ellipses buttons?
What’s wrong with this?
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?
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?
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
CSS
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
WP7.5 app vs iPhone app
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
WP7.5 app vs iPhone app
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)
WP7.5 app vs iPhone app
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
WP7.5 app vs iPhone app
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
WP7.5 app vs iPhone app
Tip: if you’re writing your own user controls, you’re probably doing it wrong
Silverlight.CodePlex.com
WP7.5 app vs iPhone app
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
Resources
Summary General Usability Practices
Windows Apps
Popups and Message Boxes
Controls and Forms (Windows and Web)
Reports
Web UI
Mobile interfaces
Controversy!
Future Thinking. Immediate Results.
Find me on Slideshare!
http://www.slideshare.net/SSWConsulting/
