Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Interface Usability
Adding Schweppervescence
Adam Cogan
Chief Architect at SSW
Microsoft Regional Director
@AdamCogan
Futu...
Agenda
 General Usability Practices
 Windows Apps
 Popups and Message Boxes
 Controls and Forms (Windows and Web)
 Re...
Technology is intimidating. People are afraid to break the system or
lose the data.
Encourage experimentation, increase co...
?
What is good UI?
Chief Architect at SSW
 Developing custom solutions for
businesses across a range of
industries such as Government,
banki...
A good UI just works the way you expect
 There are no surprises
 There is no need to use help
 RTFM
Future Thinking. Im...
 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 goo...
MSDN
Stack Overflow
 http://channel9.msdn.com/achievements/visualstudio
Visual Studio Achievements
 Good UI:
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 t...
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 Colum...
 Make it more than just navigation
 Put useful current information on the homepage
E.g. Top billing customers for the mo...
 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 ...
 Put all options in even if some aren’t selectable
Let’s look at two examples:
 Checkbox
 Image…
Include extra informat...
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 ba...
Do you have a "last
taken" option?
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 T...
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 | Us...
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...
 http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt
erfaces-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 ...
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...
Should this be a popup?
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...
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 includ...
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 fo...
Which is better?
A: Neither, use a checkbox!
Good
What’s wrong with this?
 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 butt...
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)
 A...
 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?
 http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt
erfaces-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 ...
Do you make graphs easy to digest?
 http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt
erfaces-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 temptin...
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 br...
 SharePoint
 Underlines are only used for links!
This does NOT mean all links should be underlined
 Always have a *rollover* effect
...
 Via CSS ...
Do you know the correct way to
display a hyperlink?
Rollover effect
Visited links
Normal links
Must be in
th...
 If a link is to an external site, a visual indication should be
provided to the user like this:
 This should be done vi...
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 a...
 Warning: Corneliu the god of performance warns against this
recommendation because
 CSS is fast
 jQuery is slow
 TODO...
 Warning: Not mainstream
 HTML 5 does not have the TARGET
 On the purchase page add “terms and conditions (opens in a
n...
 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 t...
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 ...
 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 ha...
Do you always give more information
under “Did not match anything”?
 Websites are continually saying
‘404 – page not foun...
 ?
 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:
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 ...
?
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
 Offl...
?
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
 Reu...
The biggest thing going for Windows Phone 8 is:
 .NET dev shops
 environment more productive than xcode
“VS2012 kicks th...
 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 ...
 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
Ap...
 Turn around through the appstore is quicker:
Appstore: 1-3 weeks (unmanaged code)
Market place: 2 days (managed code)
Qu...
 Do you know what guidelines to follow for WP8?
 User Experience Design Guidelines for Windows Phone
http://msdn.microso...
 Tip: if you’re writing your own user controls, you’re probably
doing it wrong
 Silverlight.CodePlex.com (WP7.5)
 Phone...
 www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterface
s-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 co...
 Rules to Better Interfaces
http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfa
ces.aspx
 Rules to Better Web...
Resources
Summary
 General Usability Practices
 Windows Apps
 Popups and Message Boxes
 Controls and Forms (Windows and Web)
 R...
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
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Interface usability-adding-schweppervescence-ver3-8
Upcoming SlideShare
Loading in …5
×

Interface usability-adding-schweppervescence-ver3-8

752 views

Published on

The whole point of a good GUI (Graphical User Interface) is being able to understand what is going on without reading every single detail. That is why we prefer big red crosses to say "Don't do that you oaf!" instead of a line of text that says "I think you may want to reconsider your options."

Published in: Business, Technology, Design
  • Be the first to comment

  • Be the first to like this

Interface usability-adding-schweppervescence-ver3-8

  1. 1. Interface Usability Adding Schweppervescence Adam Cogan Chief Architect at SSW Microsoft Regional Director @AdamCogan Future Thinking. Immediate Results.
  2. 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. 3. 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
  4. 4. ? What is good UI?
  5. 5. 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.
  6. 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.
  7. 7.  Intuitive  Feels fast  Eg. No white screens, threading code  Consistent  No clutter – not busy… A good UI is...
  8. 8.  Minimal “modal” popups  Good error handling  Easy to customize + apps (aka a platform)  Gamification eg. Badges A good UI is...
  9. 9. MSDN
  10. 10. Stack Overflow
  11. 11.  http://channel9.msdn.com/achievements/visualstudio Visual Studio Achievements
  12. 12.  Good UI:
  13. 13. Future Thinking. Immediate Results.
  14. 14. 1. General Usability Practices Future Thinking. Immediate Results.
  15. 15. Do you intuitively know how to use something?
  16. 16. A thermostat
  17. 17. VS
  18. 18.  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'?
  19. 19. Future Thinking. Immediate Results.
  20. 20.  You’re late for a flight and you need to check in  … Do you realise people scan, not read?
  21. 21.  Google: SSW storyboarding Do you know to use storyboards?
  22. 22. Is your data easy to search?
  23. 23.  TOUCH What is more important than search?
  24. 24.  Eg. http://www.microsoft.com/presspass/features/2011/jun11/06- 01corporatenews.aspx Windows 8 live tiles - metro
  25. 25. Do you consider optical alignment?
  26. 26. Bad
  27. 27. Good …
  28. 28. And now…
  29. 29.  iSlate
  30. 30.  iSlate
  31. 31.  iSlate….  IsLate?
  32. 32. Do you make matrix columns as simple as possible?
  33. 33. Do you make matrix columns as simple as possible?
  34. 34.  ? What about Columns or Text?
  35. 35.  Columns are easier to scan  Use when comparing data, or need ordering  Text is aesthetically pleasing What about Columns or Text?
  36. 36.  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.
  37. 37.  Do you think this rule is limited to web UI?
  38. 38.  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?
  39. 39.  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
  40. 40. A good app should…  Encourage experimentation to increase comfort:  Undo  Remember your last state  Live preview
  41. 41. Live previews
  42. 42.  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?
  43. 43. Do you have a "last taken" option?
  44. 44. I have a dream
  45. 45. Help - Do you have a wiki for each page or form?
  46. 46. Help - Do you help users when they get errors by directing them to a wiki or KB?
  47. 47. http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces.aspx Lots more:
  48. 48. 2. Windows Applications
  49. 49.  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?
  50. 50. Menu - Do you have a "Help | Training Videos" item?
  51. 51.  Easier to keep up-to-date and maintain  Stats on usage  Allows community commenting Menu - Do you have your "Help | User Guide" online?
  52. 52. Menu - Do you include a "Tools | Validate Data"?
  53. 53.  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
  54. 54.  http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt erfaces-Windows-Application.aspx Lots more:
  55. 55. 3. Popups and Message Boxes
  56. 56. When good sites go bad…
  57. 57. Not even Apple could make the popup less annoying
  58. 58. Do you avoid message boxes?
  59. 59.  Only use them in the following scenarios:  Confirming the deletion of a record  Kicking off a long running process Do you avoid message boxes?
  60. 60. Is it ok to cancel? Do you use messages that are concise and informative?
  61. 61. Microsoft uses this one Do you use messages that are concise and informative?
  62. 62.  Some people like popup forms.  Some do not.  ? Vote – What about popup forms?
  63. 63. You can’t read or edit content behind Long loading times – ask CRM4 users! Popup modal forms are no good
  64. 64. 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
  65. 65. Should this be a popup?
  66. 66. Who likes popup forms?  ? Re-vote....
  67. 67.  http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterInt erfaces-Popups-and-Messages.aspx Lots more:
  68. 68. 4. Controls and Forms (Windows and Web)
  69. 69.  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?
  70. 70. Rule #9 http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterBusinessIntelligence.asp x#AllDimensionsTag
  71. 71.  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?
  72. 72. What if user wants to sort by either alphabetical or numerical?
  73. 73. What’s a better way to do this???
  74. 74. Radio buttons…
  75. 75.  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?
  76. 76. Which is better? A: Neither, use a checkbox!
  77. 77. Good
  78. 78. What’s wrong with this?
  79. 79.  Better Example Also applicable for the rule “Less is More - Do you always try to reduce complexity?”
  80. 80.  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?
  81. 81. Do you disable buttons that are unavailable?
  82. 82.  What’s wrong with this?
  83. 83.  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?
  84. 84.  http://demos.telerik.com/silverlight/#RichTextBox/MSWord (Telerik) Telerik rich textbox
  85. 85.  Helps the user enter more data related to that field  Should call a popup form Do you use ellipses buttons?
  86. 86. Do you use ellipses buttons?
  87. 87.  http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt erfaces-Controls.aspx Lots more:
  88. 88. 6. Reports
  89. 89.  A display containing more than four perceptual units of information cannot be understood at a glance Do you make graphs easy to digest?
  90. 90. Do you make graphs easy to digest?
  91. 91.  http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt erfaces-Reports.aspx Lots more:
  92. 92. 7. Web UI
  93. 93. 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!
  94. 94. Treat your users like monkeys!
  95. 95.  Bad banana!
  96. 96. ? How do I know where I am?
  97. 97. Do you know to use Breadcrumbs?  Note the links.... What is the exception? ....
  98. 98. 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
  99. 99.  SharePoint
  100. 100.  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?
  101. 101.  Via CSS ... Do you know the correct way to display a hyperlink? Rollover effect Visited links Normal links Must be in this order!
  102. 102.  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
  103. 103. Via CSS:
  104. 104.  Custom for SSW  Filters image links and other parameters  ... Via jQuery
  105. 105.  ‘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
  106. 106.  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
  107. 107.  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?
  108. 108.  http://www.ssw.com.au/ssw/Events/Scrum-Training-Course.aspx Do you save clicking through?
  109. 109.  http://www.ssw.com.au/ssw/Events/Scrum-Training-Course.aspx Do you save clicking through?
  110. 110. 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
  111. 111. Do you use icons in web pages to indicate status directly?
  112. 112. Do you use icons in web pages to indicate status directly?
  113. 113. 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
  114. 114.  What’s important  ? Do you have a consistent search results screen?
  115. 115.  A statement that explains the criteria  Pages navigation  Number of results found  Filters at the top  ... Do you have a consistent search results screen?
  116. 116. 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  …
  117. 117.  ?  Use SSW Link Auditor www.ssw.com.au/ssw/LinkAuditor Broken Links are inexcusable!
  118. 118.  Master pages  CSS Do you know the two things to create a consistent look and feel?
  119. 119. Do you give the 6 options to share?
  120. 120. Do you make the logged in state obvious?
  121. 121.  www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsit esNavigation.aspx Lots more:
  122. 122. 6. Mobile Interfaces
  123. 123. First impressions: You only get one shot
  124. 124. 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...
  125. 125. ? When do you build a iPhone app vs iPhone web app?
  126. 126.  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
  127. 127. ? When do you build a WP8 app vs an iPhone app?
  128. 128.  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
  129. 129. 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
  130. 130.  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
  131. 131.  WP8 has resolved those problems and is perfect in every way  <3 WP8 app vs iPhone app
  132. 132. 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
  133. 133.  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
  134. 134.  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
  135. 135.  Tip: if you’re writing your own user controls, you’re probably doing it wrong  Silverlight.CodePlex.com (WP7.5)  Phone.CodePlex.com (WP8) WP8 app vs iPhone app
  136. 136.  www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterface s-Mobile.aspx Lots more:
  137. 137. 7. Controversy!
  138. 138. ?
  139. 139.  Well, we had a few in the presentation...  
  140. 140. 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
  141. 141.  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
  142. 142. Resources
  143. 143. 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.
  144. 144. Thank You! Sydney | Melbourne | Brisbane | Adelaide info@ssw.com.au www.ssw.com.au
  145. 145. Find me on Slideshare! http://www.slideshare.net/SSWConsulting/

×