SlideShare a Scribd company logo

Interface Usability - Adding Schweppervescence

Download as PPTX, PDF
S
SSW

The document discusses best practices in interface usability, emphasizing principles like minimalism, intuitive design, and encouraging user experimentation. It covers various topics including general usability practices for Windows apps, popups, controls and forms, web UI, and mobile interfaces, providing guidelines for creating effective user interfaces. Key recommendations involve avoiding unnecessary dialogs, remembering user preferences, and presenting information clearly to enhance the overall user experience.

TechnologyDesign
1 of 191
Downloaded 16 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
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.
Comfort of Learning 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*
What is good UI? ?
About Adam 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 Future Thinking. Immediate Results.
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.
Interface Usability - Adding Schweppervescence
A good UI is...  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
MSDN
Stack Overflow
Visual Studio Achievements  http://channel9.msdn.com/achievements/visualstudio
 Good UI:
Future Thinking. Immediate Results.
Interface Usability - Adding Schweppervescence
1. General Usability Practices Future Thinking. Immediate Results.
Do you intuitively know how to use something?
A thermostat
VS
Interface Usability - Adding Schweppervescence
Do you realize that when it comes to interface design 'less is more'?  Less is more  The importance of Defaults - Aim for 'Next', 'Next', 'Next„  Hide advanced options, but make them easy to find!
Future Thinking. Immediate Results.
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Do you realise people scan, not read?  You‟re late for a flight and you need to check in  …
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Do you know to use storyboards?  Google: SSW storyboarding
Is your data easy to search?
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
What is more important than search?  TOUCH
Interface Usability - Adding Schweppervescence
Windows 8 live tiles - metro  Eg. http://www.microsoft.com/presspass/features/2011/jun11/06- 01corporatenews.aspx
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?  ?
What about Columns or Text?  Columns are easier to scan  Use when comparing data, or need ordering  Text is aesthetically pleasing
Interface Usability - Adding Schweppervescence
Do you make the homepage a portal?  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 Future Thinking. Immediate Results.
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
 Do you think this rule is limited to web UI?
Do you log usage?  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
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Include extra information if it gives you context  Put all options in even if some aren‟t selectable Let‟s look at two examples:  Checkbox  Image…
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
A good app should…  Encourage experimentation to increase comfort:  Undo  Remember your last state  Live preview
Live previews
Do you use the concept of drafts?  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
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?
Lots more: http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces.aspx
2. Windows Applications
Menu - Do you know the 8 items every "Help" menu needs?  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 have a "Help | Training Videos" item?
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Menu - Do you have your "Help | User Guide" online?  Easier to keep up-to-date and maintain  Stats on usage  Allows community commenting
Interface Usability - Adding Schweppervescence
Menu - Do you include a "Tools | Validate Data"?
Give Instructional Help  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
Lots more:  http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt erfaces-Windows-Application.aspx
3. Popups and Message Boxes
When good sites go bad…
Interface Usability - Adding Schweppervescence
Not even Apple could make the popup less annoying
Do you avoid message boxes?
Interface Usability - Adding Schweppervescence
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 use messages that are concise and informative? Is it ok to cancel?
Do you use messages that are concise and informative? Microsoft uses this one
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Vote – What about popup forms?  Some people like popup forms.  Some do not.  ?
Popup modal forms are no good You can‟t read or edit content behind Long loading times – ask CRM4 users!
Popup modal forms are good Obvious you have an action to take Simplify a form Doesn‟t get lost behind another window Can dim the background for focus
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Should this be a popup?
Re-vote.... Who likes popup forms?  ?
Lots more:  http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterInt erfaces-Popups-and-Messages.aspx
4. Controls and Forms (Windows and Web)
Do you know how to label dropdown lists?  Less is more!  Select all should be “-All-”  Note: if you want to select nothing then add an entry to the dropdown for (null)
Interface Usability - Adding Schweppervescence
Rule #9 http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterBusinessIntelligence.asp x#AllDimensionsTag
Do you include the number of results in drop down list?  When you use a combo box, it's very helpful to be able to see at a glance how many results can be expected
What if user wants to sort by either alphabetical or numerical?
What‟s a better way to do this???
Radio buttons…
Do you use Text Boxes for displaying data?  users know it is data, not a label of the application  users can copy and paste from the field
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Which is better? A: Neither, use a checkbox!
Good
What‟s wrong with this?
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
 Better Example Also applicable for the rule “Less is More - Do you always try to reduce complexity?”
Guidelines – when to use what?  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
Do you disable buttons that are unavailable?
 What‟s wrong with this?
Do you know when to use rich textboxes?  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
Telerik rich textbox  http://demos.telerik.com/silverlight/#RichTextBox/MSWord (Telerik)
Do you use ellipses buttons?  Helps the user enter more data related to that field  Should call a popup form
Do you use ellipses buttons?
Lots more:  http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt erfaces-Controls.aspx
6. Reports
Interface Usability - Adding Schweppervescence
Do you make graphs easy to digest?  A display containing more than four perceptual units of information cannot be understood at a glance
Do you make graphs easy to digest?
Interface Usability - Adding Schweppervescence
Lots more:  http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt erfaces-Reports.aspx
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!
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
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
Interface Usability - Adding Schweppervescence
Do you know the correct way to display a hyperlink?  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.
 Via CSS ... Do you know the correct way to display a hyperlink? Normal links Must be in Visited links this order! Rollover effect
Hyperlinks - external  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  ...
Via CSS:
Via jQuery  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!
Should external links open in a New Window?  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
Do you save clicking through?  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 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?
Do you use icons in web pages to indicate status directly?
Do you use SetFocusOnError on controls that fail validation For Validation Errors, don‟t assume they have to read a messagebox Automatically focus on the control Note: Balloons also direct the eye…
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
Do you have a consistent search results screen?  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  ...
Interface Usability - Adding Schweppervescence
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  …
Interface Usability - Adding Schweppervescence
Broken Links are inexcusable!  ?  Use SSW Link Auditor www.ssw.com.au/ssw/LinkAuditor
Do you know the two things to create a consistent look and feel?  Master pages  CSS
Do you give the 6 options to share?
Do you make the logged in state obvious?
Lots more:  www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsit esNavigation.aspx
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? ?
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/
When do you build a WP8 app vs an iPhone app? ?
WP8 app vs 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
WP8 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 8
WP8 app vs iPhone app  WP8 has resolved those problems and is perfect in every way  <3
WP8 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)
WP8 app vs iPhone app  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
WP8 app vs iPhone app  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
WP8 app vs iPhone app  Tip: if you‟re writing your own user controls, you‟re probably doing it wrong  Silverlight.CodePlex.com (WP7.5)  Phone.CodePlex.com (WP8)
Lots more:  www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterface s-Mobile.aspx
7. Controversy!
?
 Well, we had a few in the presentation...  
Comfort of Learning 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*
Resources  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! Future Thinking. Immediate Results.
Thank You! Sydney | Melbourne | Brisbane | Adelaide info@ssw.com.au www.ssw.com.au
Find me on Slideshare! http://www.slideshare.net/SSWConsulting/

More Related Content

PPTX
Interface usability-adding-schweppervescence-ver3-8
SSW
 
PDF
Progressive Disclosure - Putting the User in Control
Jang F.M. Graat
 
PPT
41 gui-design
Jaya Christina
 
PPT
SafeAssign at Wilmington University
Wilmington University
 
PDF
User-Interface Usability Evaluation
CSCJournals
 
PPTX
Insivia Seminar Series: Usability & User Interface
Insivia
 
KEY
Home Page Analysis
Jaime Christine Perez
 
PDF
Usability & Interface Design for HiTech Products
Pinkesh Shah
 
Interface usability-adding-schweppervescence-ver3-8
SSW
 
Progressive Disclosure - Putting the User in Control
Jang F.M. Graat
 
41 gui-design
Jaya Christina
 
SafeAssign at Wilmington University
Wilmington University
 
User-Interface Usability Evaluation
CSCJournals
 
Insivia Seminar Series: Usability & User Interface
Insivia
 
Home Page Analysis
Jaime Christine Perez
 
Usability & Interface Design for HiTech Products
Pinkesh Shah
 

Viewers also liked (7)

PPT
A User Interface Usability Evaluation of the Electronic Ballot Box used in th...
pichiliani
 
PDF
Banking on mobile
Optimal Usability
 
PPTX
ADM: Mobile banking and trading website - Keytrade Bank
Human Interface Group
 
PPT
User interface design for the Web Engineering Psychology
LawrenceNajjar
 
PPTX
User Interface Design for Medical Devices - The Relationship Between Usabilit...
UXPA Boston
 
PDF
online banking system
kartikeya upadhyay
 
PPTX
Online Banking Project
M.Saber
 
A User Interface Usability Evaluation of the Electronic Ballot Box used in th...
pichiliani
 
Banking on mobile
Optimal Usability
 
ADM: Mobile banking and trading website - Keytrade Bank
Human Interface Group
 
User interface design for the Web Engineering Psychology
LawrenceNajjar
 
User Interface Design for Medical Devices - The Relationship Between Usabilit...
UXPA Boston
 
online banking system
kartikeya upadhyay
 
Online Banking Project
M.Saber
 
Ad

Similar to Interface Usability - Adding Schweppervescence (20)

PPTX
Designing usable forms
Tarik (Rick) Dzekman
 
PDF
Systems Analysis and Design 6th Edition Dennis Solutions Manual
marcelinakudronfbq
 
PDF
Systems Analysis and Design 6th Edition Dennis Solutions Manual
ojilejosie04
 
PPT
From Website To Webapp Shane Morris
Shane Morris
 
PPT
Usability Guidelines
homeplate31
 
PDF
Usability Testing by Rajdeep Gupta, Misys
STC India UX SIG
 
PPT
corePHP Usability Accessibility by Steven Pignataro
John Coonen
 
PPTX
Application Design - Part 1
Kelley Howell
 
PDF
When Interface Design Attacks
Ross Lawley
 
PDF
When Interface Design Attacks
oscon2007
 
PDF
Uxpin web ui design patterns 2014
MoodLabs
 
PPS
Presentation Ux
Jochen Vandendriessche
 
PDF
Usability and Salesforce - Dallas Salesforce.com User Group September 2011
Shell Black
 
PPTX
Designing The Interface For Use
Christina Wodtke
 
PPT
Quality and the "Secret Mission:" From End-Stage Tester to Skilled Analyst
Devorah Firestone
 
PDF
"Open" includes users - Leverage their input
Randy Earl
 
PPT
An Introduction to Usability
dirk.swart
 
PPT
Techniques for Reviewing a User Interface
Rhonda Bracey
 
ODP
Eliminating the Odd
Kirk Bridger
 
PPTX
Measuring UX
Michael Le
 
Designing usable forms
Tarik (Rick) Dzekman
 
Systems Analysis and Design 6th Edition Dennis Solutions Manual
marcelinakudronfbq
 
Systems Analysis and Design 6th Edition Dennis Solutions Manual
ojilejosie04
 
From Website To Webapp Shane Morris
Shane Morris
 
Usability Guidelines
homeplate31
 
Usability Testing by Rajdeep Gupta, Misys
STC India UX SIG
 
corePHP Usability Accessibility by Steven Pignataro
John Coonen
 
Application Design - Part 1
Kelley Howell
 
When Interface Design Attacks
Ross Lawley
 
When Interface Design Attacks
oscon2007
 
Uxpin web ui design patterns 2014
MoodLabs
 
Presentation Ux
Jochen Vandendriessche
 
Usability and Salesforce - Dallas Salesforce.com User Group September 2011
Shell Black
 
Designing The Interface For Use
Christina Wodtke
 
Quality and the "Secret Mission:" From End-Stage Tester to Skilled Analyst
Devorah Firestone
 
"Open" includes users - Leverage their input
Randy Earl
 
An Introduction to Usability
dirk.swart
 
Techniques for Reviewing a User Interface
Rhonda Bracey
 
Eliminating the Odd
Kirk Bridger
 
Measuring UX
Michael Le
 
Ad

More from SSW (7)

PPTX
What’s new in VS 2015 and ALM 2015
SSW
 
PPTX
ALM for CRM - George Doubinski
SSW
 
PPTX
A modern architecturereview–usingcodereviewtools-ver-3.5
SSW
 
TXT
Rules to-better-video-export-process
SSW
 
PPTX
VisualStudio2012-WhatsNew-TechEd_v3-9
SSW
 
PPTX
SharePoint Jonah Lomu of CMS
SSW
 
PPTX
Ssw forte-agile-seminar
SSW
 
What’s new in VS 2015 and ALM 2015
SSW
 
ALM for CRM - George Doubinski
SSW
 
A modern architecturereview–usingcodereviewtools-ver-3.5
SSW
 
Rules to-better-video-export-process
SSW
 
VisualStudio2012-WhatsNew-TechEd_v3-9
SSW
 
SharePoint Jonah Lomu of CMS
SSW
 
Ssw forte-agile-seminar
SSW
 

Recently uploaded (20)

PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PDF
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PDF
KodekX | Application Modernization Development
KodekX
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PDF
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PDF
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
Network Security Unit 5.pdf for BCA BBA.
Serpent6
 
Teaching material agriculture food technology
LiaRayya
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
KodekX | Application Modernization Development
KodekX
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 

Interface Usability - Adding Schweppervescence

  • 1. Interface Usability Adding Schweppervescence Adam Cogan Chief Architect at SSW Microsoft Regional Director @AdamCogan Future Thinking. Immediate Results.
  • 2. 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.
  • 3. Comfort of Learning 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*
  • 4. What is good UI? ?
  • 5. About Adam 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 Future Thinking. Immediate Results.
  • 6. 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.
  • 8. A good UI is...  Intuitive  Feels fast  Eg. No white screens, threading code  Consistent  No clutter – not busy…
  • 9. A good UI is...  Minimal “modal” popups  Good error handling  Easy to customize + apps (aka a platform)  Gamification eg. Badges
  • 10. MSDN
  • 12. Visual Studio Achievements  http://channel9.msdn.com/achievements/visualstudio
  • 13. Good UI:
  • 16. 1. General Usability Practices Future Thinking. Immediate Results.
  • 17. Do you intuitively know how to use something?
  • 19. VS
  • 21. Do you realize that when it comes to interface design 'less is more'?  Less is more  The importance of Defaults - Aim for 'Next', 'Next', 'Next„  Hide advanced options, but make them easy to find!
  • 26. Do you realise people scan, not read?  You‟re late for a flight and you need to check in  …
  • 30. Do you know to use storyboards?  Google: SSW storyboarding
  • 31. Is your data easy to search?
  • 35. What is more important than search?  TOUCH
  • 37. Windows 8 live tiles - metro  Eg. http://www.microsoft.com/presspass/features/2011/jun11/06- 01corporatenews.aspx
  • 38. Do you consider optical alignment?
  • 39. Bad
  • 42. iSlate
  • 43. iSlate
  • 44. iSlate….  IsLate?
  • 45. Do you make matrix columns as simple as possible?
  • 46. Do you make matrix columns as simple as possible?
  • 47. What about Columns or Text?  ?
  • 48. What about Columns or Text?  Columns are easier to scan  Use when comparing data, or need ordering  Text is aesthetically pleasing
  • 50. Do you make the homepage a portal?  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 Future Thinking. Immediate Results.
  • 53. Do you think this rule is limited to web UI?
  • 54. Do you log usage?  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
  • 58. Include extra information if it gives you context  Put all options in even if some aren‟t selectable Let‟s look at two examples:  Checkbox  Image…
  • 61. A good app should…  Encourage experimentation to increase comfort:  Undo  Remember your last state  Live preview
  • 63. Do you use the concept of drafts?  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
  • 64. I have a dream
  • 65. Help - Do you have a wiki for each page or form?
  • 66. Help - Do you help users when they get errors by directing them to a wiki or KB?
  • 69. Menu - Do you know the 8 items every "Help" menu needs?  Training Videos  Online User Guide  Knowledge Base  Make a Suggestion  Report a Bug  Check for Updates  Run Unit Tests...  About [Product Name]...
  • 70. Menu - Do you have a "Help | Training Videos" item?
  • 73. Menu - Do you have your "Help | User Guide" online?  Easier to keep up-to-date and maintain  Stats on usage  Allows community commenting
  • 75. Menu - Do you include a "Tools | Validate Data"?
  • 76. Give Instructional Help  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
  • 77. Lots more:  http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt erfaces-Windows-Application.aspx
  • 78. 3. Popups and Message Boxes
  • 79. When good sites go bad…
  • 81. Not even Apple could make the popup less annoying
  • 82. Do you avoid message boxes?
  • 84. Do you avoid message boxes?  Only use them in the following scenarios:  Confirming the deletion of a record  Kicking off a long running process
  • 85. Do you use messages that are concise and informative? Is it ok to cancel?
  • 86. Do you use messages that are concise and informative? Microsoft uses this one
  • 89. Vote – What about popup forms?  Some people like popup forms.  Some do not.  ?
  • 90. Popup modal forms are no good You can‟t read or edit content behind Long loading times – ask CRM4 users!
  • 91. Popup modal forms are good Obvious you have an action to take Simplify a form Doesn‟t get lost behind another window Can dim the background for focus
  • 94. Should this be a popup?
  • 96. Lots more:  http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterInt erfaces-Popups-and-Messages.aspx
  • 97. 4. Controls and Forms (Windows and Web)
  • 98. Do you know how to label dropdown lists?  Less is more!  Select all should be “-All-”  Note: if you want to select nothing then add an entry to the dropdown for (null)
  • 101. Do you include the number of results in drop down list?  When you use a combo box, it's very helpful to be able to see at a glance how many results can be expected
  • 102. What if user wants to sort by either alphabetical or numerical?
  • 103. What‟s a better way to do this???
  • 105. Do you use Text Boxes for displaying data?  users know it is data, not a label of the application  users can copy and paste from the field
  • 108. Which is better? A: Neither, use a checkbox!
  • 109. Good
  • 113. Better Example Also applicable for the rule “Less is More - Do you always try to reduce complexity?”
  • 114. Guidelines – when to use what?  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
  • 115. Do you disable buttons that are unavailable?
  • 116.  What‟s wrong with this?
  • 117. Do you know when to use rich textboxes?  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
  • 118. Telerik rich textbox  http://demos.telerik.com/silverlight/#RichTextBox/MSWord (Telerik)
  • 119. Do you use ellipses buttons?  Helps the user enter more data related to that field  Should call a popup form
  • 120. Do you use ellipses buttons?
  • 121. Lots more:  http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt erfaces-Controls.aspx
  • 124. Do you make graphs easy to digest?  A display containing more than four perceptual units of information cannot be understood at a glance
  • 125. Do you make graphs easy to digest?
  • 127. Lots more:  http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt erfaces-Reports.aspx
  • 129. 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!
  • 130. Treat your users like monkeys!
  • 131. Bad banana!
  • 136. How do I know where I am? ?
  • 137. Do you know to use Breadcrumbs?  Note the links.... What is the exception? ....
  • 138. 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
  • 139. SharePoint
  • 141. Do you know the correct way to display a hyperlink?  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.
  • 142. Via CSS ... Do you know the correct way to display a hyperlink? Normal links Must be in Visited links this order! Rollover effect
  • 143. Hyperlinks - external  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  ...
  • 145. Via jQuery  Custom for SSW  Filters image links and other parameters  ...
  • 146. 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??
  • 147. 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!
  • 148. Should external links open in a New Window?  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
  • 149. Do you save clicking through?  http://www.ssw.com.au/ssw/Events/Scrum-Training-Course.aspx
  • 150. Do you save clicking through?  http://www.ssw.com.au/ssw/Events/Scrum-Training-Course.aspx
  • 151. 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
  • 152. Do you use icons in web pages to indicate status directly?
  • 153. Do you use icons in web pages to indicate status directly?
  • 154. Do you use SetFocusOnError on controls that fail validation For Validation Errors, don‟t assume they have to read a messagebox Automatically focus on the control Note: Balloons also direct the eye…
  • 158. Do you have a consistent search results screen?  What‟s important  ?
  • 159. Do you have a consistent search results screen?  A statement that explains the criteria  Pages navigation  Number of results found  Filters at the top  ...
  • 161. 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  …
  • 163. Broken Links are inexcusable!  ?  Use SSW Link Auditor www.ssw.com.au/ssw/LinkAuditor
  • 164. Do you know the two things to create a consistent look and feel?  Master pages  CSS
  • 165. Do you give the 6 options to share?
  • 166. Do you make the logged in state obvious?
  • 167. Lots more:  www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsit esNavigation.aspx
  • 170. 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...
  • 171. When do you build a iPhone app vs iPhone web app? ?
  • 172. 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/
  • 173. When do you build a WP8 app vs an iPhone app? ?
  • 174. WP8 app vs 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
  • 175. 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
  • 176. WP8 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 8
  • 177. WP8 app vs iPhone app  WP8 has resolved those problems and is perfect in every way  <3
  • 178. WP8 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)
  • 179. WP8 app vs iPhone app  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
  • 180. WP8 app vs iPhone app  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
  • 181. WP8 app vs iPhone app  Tip: if you‟re writing your own user controls, you‟re probably doing it wrong  Silverlight.CodePlex.com (WP7.5)  Phone.CodePlex.com (WP8)
  • 182. Lots more:  www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterface s-Mobile.aspx
  • 184. ?
  • 185. Well, we had a few in the presentation...  
  • 186. Comfort of Learning 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*
  • 187. Resources  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
  • 189. 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.
  • 190. Thank You! Sydney | Melbourne | Brisbane | Adelaide info@ssw.com.au www.ssw.com.au
  • 191. Find me on Slideshare! http://www.slideshare.net/SSWConsulting/

Editor's Notes

  • #2: TODO: Include text for first two pts
  • #3: Don’t delete –this is the version number for SlideShare
  • #4: TO DO Add Schweppervescenceimg
  • #6: TODO: Include text for first two pts
  • #8: Adam looks weird here...
  • #9: http://www.ssw.com.au/ssw/standards/rules/RulestoBetterInterfaces-general.aspx#SelfEvident
  • #17: I am embarrassed by this
  • #19: Section header
  • #21: Look I don’t know and I don’t care
  • #34: http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-General.aspx#EasySearch
  • #35: http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-General.aspx#EasySearch
  • #39: Zz Can’t remember
  • #45: TODO: Make pictures bigger
  • #54: http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-General.aspx#HomePagePortal
  • #57: I thought of a non-web example – this is Adobe Illustrator, but all of Adobe’s Creative Suite does this. Gives you the option to hide it if you don’t like the portal.
  • #72: So cliche...
  • #81: http://skunk/ssw/Standards/Rules/RulestoBetterInterfaces-Forms.aspx#DataEntryForms Remembering recentsearchs
  • #89: http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-General.aspx#messagebox
  • #96: http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-General.aspx#Popup
  • #102: So cliche...
  • #103: http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Data.aspx#AllInComboBoxes
  • #113: http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Data.aspx#UseCheckBoxThey store dataDon’t use them to perform actions!Use a button instead
  • #117: FAIL!
  • #122: http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Data.aspx#RichTextboxNotesTO DO: Why this isn’t in controls/move to controls
  • #125: http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Forms.aspx#ElipsisForDialogs
  • #127: Zz ???
  • #129: So cliche...
  • #144: http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesLayout.aspx#Breadcrumb
  • #145: http://www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsitesNavigation.aspx#OneLink
  • #148: Underline - http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesNavigation.aspx#DontUseUnderlinesRollover - http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesNavigation.aspx#underline Show Visited Links - http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesNavigation.aspx#visitedlink
  • #149: TODO thing with footer
  • #153: http://www.ssw.com.au/ssw/Standards/rules/RulesToBetterWebsitesNavigation.aspx#ManageExternalLinks
  • #154: (non-important)TODO: Give Adam two very long pages1. one using css2. One using jquery
  • #155: Actually, the designer consensus for _blank is to never do it because you are taking a decision away from the user. So perhaps this could actually be an issue you can ask for debate.
  • #156: http://www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsitesNavigation.aspx#ClickingThroughIT’S AN AD!!!
  • #157: http://www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsitesNavigation.aspx#ClickingThroughIT’S AN AD!!!
  • #158: http://www.ssw.com.au/ssw/standards/rules/RulestoBetterInterfaces-Controls.aspx#CorrectValidationFocus
  • #159: http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesLayout.aspx#StatusIcon
  • #160: http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesLayout.aspx#StatusIcon
  • #161: http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Data.aspx#CorrectValidationFocus
  • #165: Filters at the topThe number of results found A statement that explains the criteria that you used for searching The number of pages found hyperlinks centred in the middlehyperlinks should be shown on the footer of the page only
  • #166: Filters at the topThe number of results found A statement that explains the criteria that you used for searching The number of pages found hyperlinks centred in the middlehyperlinks should be shown on the footer of the page only
  • #168: http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesLayout.aspx#ImproveSearchWebsites are continually saying “404 – page not found” or “your search did not match anything”..... this should be avoided.
  • #187: Is this true? Ive seen waiters using iphone apps. Might be jailbroken?
  • #192: Shorts in winter guy
  • #195: TODO: Include text for first two pts
  • #196: Move this to OWN SECTION