Interface usability-adding-schweppervescence-ver3-8

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

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

A good UI just works the way you expect
 There are no surprises
 There is no need to use help
 RTFM

 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...

 http://channel9.msdn.com/achievements/visualstudio
Visual Studio Achievements

1. General Usability Practices

Do you intuitively know how to use
something?

 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?

 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?

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

 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?

Do you have a "last
taken" option?

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:

 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/RulestoBetterInt
erfaces-Windows-Application.aspx
Lots more:

Not even Apple could make
the popup less annoying

 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

Who likes popup forms?
 ?
Re-vote....

 http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterInt
erfaces-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.asp
x#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???

 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!

 Better Example
Also applicable
for the rule
“Less is More -
Do you always
try to reduce
complexity?”

 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 options
e.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?

erfaces-Controls.aspx
Lots more:

 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?

erfaces-Reports.aspx
Lots more:

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!

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

 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

 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 2012 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/RulesToBetter
WebsitesNavigation.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?

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/Rules
toBetterInterfaces-
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
 CSS
Do you know the two things to create
a consistent look and feel?

Do you give the 6
options to share?

Do you make the logged in state
obvious?

 www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsit
esNavigation.aspx
Lots more:

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
• Camera, Contacts, Photos e.t.c.
 existing web app and just add CSS
 Offline: An iphone (or WP8 ) web app without a network connection, will not load the
web page you were on previously.
Well, it can… http://damianbrady.com.au/dyrnaa/game/
iPhone app vs iPhone Web app

?
When do you build a WP8 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
WP8 app vs iPhone app

The biggest thing going for Windows Phone 8 is:
 .NET dev shops
 environment more productive than xcode
“VS2012 kicks the sh*t out of any other IDE”
- Damian Brady

 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 8

 WP8 has resolved those problems and is perfect in every way
 <3

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 (unmanaged code)
Market place: 2 days (managed code)
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 WP8?
 User Experience Design Guidelines for Windows Phone
http://msdn.microsoft.com/en-
us/library/windowsphone/design/hh202915(v=vs.92).aspx

 Tip: if you’re writing your own user controls, you’re probably
doing it wrong
 Silverlight.CodePlex.com (WP7.5)
 Phone.CodePlex.com (WP8)

 www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterface
s-Mobile.aspx
Lots more:

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

 Rules to Better Interfaces
http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfa
ces.aspx
 Rules to Better Website Layouts
http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsi
tesLayout.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.au
www.ssw.com.au

Find me on Slideshare!
http://www.slideshare.net/SSWConsulting/

Interface usability-adding-schweppervescence-ver3-8

More Related Content

Similar to Interface usability-adding-schweppervescence-ver3-8

More from SSW

Recently uploaded

Interface usability-adding-schweppervescence-ver3-8

Editor's Notes