Interface design is not something that belongs solely in the world of Apple. Your website and applications can all benefit greatly from an understanding of how your users might navigate your product. Presented At the Sydney NETUG on August 18th by Adam Cogan

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

11. Stack Overflow

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

13.  Good UI:

14. Future Thinking. Immediate Results.

16. 1. General Usability Practices
Future Thinking. Immediate Results.

17. Do you intuitively know how to use
something?

18. A thermostat

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!

22. Future Thinking. Immediate Results.

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

40. Good
…

41. And now…

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

62. Live previews

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?

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

68. 2. Windows Applications

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?

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

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)

100. Rule #9
http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterBusinessIntelligence.asp
x#AllDimensionsTag

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

104. Radio buttons…

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

110. What‟s wrong with this?

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

122. 6. Reports

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

128. 7. Web UI

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

144. Via CSS:

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

168. 6. Mobile Interfaces

169. First impressions:
You only get one shot

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

183. 7. Controversy!

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

188. Resources

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/