interface usability - adding schweppervescence
TRANSCRIPT
![Page 1: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/1.jpg)
Interface Usability Adding Schweppervescence
Adam CoganChief Architect at SSWMicrosoft Regional Director@AdamCogan
Future Thinking. Immediate Results.
![Page 2: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/2.jpg)
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.
![Page 3: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/3.jpg)
Technology is intimidating. People are afraid to break the system or lose the data.
Encourage experimentation, increase comfort Have reversible actions (Undo) Previewed actionsAvoid dialogs unless there’s a system error (not user error) Track user preferences and defaults, *remember recent*
Comfort of Learning
![Page 4: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/4.jpg)
?
What is good UI?
![Page 5: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/5.jpg)
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.
![Page 6: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/6.jpg)
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.
![Page 7: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/7.jpg)
![Page 8: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/8.jpg)
Intuitive Feels fast
Eg. No white screens, threading code Consistent No clutter – not busy…
A good UI is...
![Page 9: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/9.jpg)
Minimal “modal” popups Good error handling Easy to customize + apps (aka a platform) Gamification eg. Badges
A good UI is...
![Page 10: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/10.jpg)
MSDN
![Page 11: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/11.jpg)
Stack Overflow
![Page 12: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/12.jpg)
http://channel9.msdn.com/achievements/visualstudio
Visual Studio Achievements
![Page 13: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/13.jpg)
Good UI:
![Page 14: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/14.jpg)
Future Thinking. Immediate Results.
![Page 15: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/15.jpg)
![Page 16: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/16.jpg)
1. General Usability Practices
Future Thinking. Immediate Results.
![Page 17: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/17.jpg)
Do you intuitively know how to use something?
![Page 18: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/18.jpg)
A thermostat
![Page 19: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/19.jpg)
VS
![Page 20: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/20.jpg)
![Page 21: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/21.jpg)
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'?
![Page 22: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/22.jpg)
Future Thinking. Immediate Results.
![Page 23: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/23.jpg)
![Page 24: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/24.jpg)
![Page 25: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/25.jpg)
![Page 26: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/26.jpg)
You’re late for a flight and you need to check in …
Do you realise people scan, not read?
![Page 27: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/27.jpg)
![Page 28: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/28.jpg)
![Page 29: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/29.jpg)
![Page 30: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/30.jpg)
Google: SSW storyboarding
Do you know to use storyboards?
![Page 31: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/31.jpg)
Is your data easy to search?
![Page 32: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/32.jpg)
![Page 33: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/33.jpg)
![Page 34: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/34.jpg)
![Page 35: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/35.jpg)
TOUCH
What is more important than search?
![Page 36: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/36.jpg)
![Page 37: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/37.jpg)
Eg. http://www.microsoft.com/presspass/features/2011/jun11/06-01corporatenews.aspx
Windows 8 live tiles - metro
![Page 38: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/38.jpg)
Do you consider optical alignment?
![Page 39: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/39.jpg)
Bad
![Page 40: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/40.jpg)
Good
…
![Page 41: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/41.jpg)
And now…
![Page 42: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/42.jpg)
iSlate
![Page 43: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/43.jpg)
iSlate
![Page 44: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/44.jpg)
iSlate…. IsLate?
![Page 45: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/45.jpg)
Do you make matrix columns as simple as possible?
![Page 46: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/46.jpg)
Do you make matrix columns as simple as possible?
![Page 47: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/47.jpg)
?
What about Columns or Text?
![Page 48: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/48.jpg)
Columns are easier to scan Use when comparing data, or need ordering
Text is aesthetically pleasing
What about Columns or Text?
![Page 49: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/49.jpg)
![Page 50: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/50.jpg)
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.
![Page 51: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/51.jpg)
![Page 52: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/52.jpg)
![Page 53: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/53.jpg)
Do you think this rule is limited to web UI?
![Page 54: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/54.jpg)
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?
![Page 55: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/55.jpg)
![Page 56: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/56.jpg)
![Page 57: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/57.jpg)
![Page 58: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/58.jpg)
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
![Page 59: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/59.jpg)
![Page 60: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/60.jpg)
![Page 61: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/61.jpg)
A good app should… Encourage experimentation to increase comfort:
Undo Remember your last state Live preview
![Page 62: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/62.jpg)
Live previews
![Page 63: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/63.jpg)
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?
![Page 64: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/64.jpg)
I have a dream
![Page 65: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/65.jpg)
Help - Do you have a wiki for each page or form?
![Page 66: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/66.jpg)
Help - Do you help users when they get errors by directing them to a wiki or KB?
![Page 67: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/67.jpg)
http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces.aspx
Lots more:
![Page 68: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/68.jpg)
2. Windows Applications
![Page 69: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/69.jpg)
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?
![Page 70: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/70.jpg)
Menu - Do you have a "Help | Training Videos" item?
![Page 71: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/71.jpg)
![Page 72: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/72.jpg)
![Page 73: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/73.jpg)
Easier to keep up-to-date and maintain Stats on usage Allows community commenting
Menu - Do you have your "Help | User Guide" online?
![Page 74: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/74.jpg)
![Page 75: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/75.jpg)
Menu - Do you include a "Tools | Validate Data"?
![Page 76: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/76.jpg)
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
![Page 77: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/77.jpg)
http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Windows-Application.aspx
Lots more:
![Page 78: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/78.jpg)
3. Popups and Message Boxes
![Page 79: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/79.jpg)
When good sites go bad…
![Page 80: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/80.jpg)
![Page 81: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/81.jpg)
Not even Apple could make the popup less annoying
![Page 82: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/82.jpg)
Do you avoid message boxes?
![Page 83: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/83.jpg)
![Page 84: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/84.jpg)
Only use them in the following scenarios: Confirming the deletion of a record Kicking off a long running process
Do you avoid message boxes?
![Page 85: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/85.jpg)
Is it ok to cancel?
Do you use messages that are concise and informative?
![Page 86: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/86.jpg)
Microsoft uses this one
Do you use messages that are concise and informative?
![Page 87: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/87.jpg)
![Page 88: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/88.jpg)
![Page 89: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/89.jpg)
Some people like popup forms. Some do not.
?
Vote – What about popup forms?
![Page 90: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/90.jpg)
You can’t read or edit content behindLong loading times – ask CRM4 users!
Popup modal forms are no good
![Page 91: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/91.jpg)
Obvious you have an action to takeSimplify a formDoesn’t get lost behind another windowCan dim the background for focus
Popup modal forms are good
![Page 92: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/92.jpg)
![Page 93: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/93.jpg)
![Page 94: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/94.jpg)
Should this be a popup?
![Page 95: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/95.jpg)
Who likes popup forms?
?
Re-vote....
![Page 96: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/96.jpg)
http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterInterfaces-Popups-and-Messages.aspx
Lots more:
![Page 97: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/97.jpg)
4. Controls and Forms (Windows and Web)
![Page 98: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/98.jpg)
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?
![Page 99: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/99.jpg)
![Page 100: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/100.jpg)
Rule #9http://www.ssw.com.au/ssw/Standards/Rules/
RulesToBetterBusinessIntelligence.aspx#AllDimensionsTag
![Page 101: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/101.jpg)
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?
![Page 102: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/102.jpg)
What if user wants to sort by either alphabetical or numerical?
![Page 103: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/103.jpg)
What’s a better way to do this???
![Page 104: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/104.jpg)
Radio buttons…
![Page 105: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/105.jpg)
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?
![Page 106: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/106.jpg)
![Page 107: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/107.jpg)
![Page 108: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/108.jpg)
Which is better?
A: Neither, use a checkbox!
![Page 109: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/109.jpg)
Good
![Page 110: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/110.jpg)
What’s wrong with this?
![Page 111: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/111.jpg)
![Page 112: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/112.jpg)
![Page 113: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/113.jpg)
Better Example
Also applicable for the rule “Less is More - Do you always try to reduce complexity?”
![Page 114: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/114.jpg)
Checkboxes 1 option – eg. yes/no, on/off Multiple simultaneous options – e.g. Eggs and Bacon and Tomato
Radio buttons 2-3 exclusive options – e.g. Coke or Pepsi
Drop down list 3+ exclusive optionse.g. Favourite SSW employee
Guidelines – when to use what?
![Page 115: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/115.jpg)
Do you disable buttons that are unavailable?
![Page 116: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/116.jpg)
What’s wrong with this?
![Page 117: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/117.jpg)
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?
![Page 118: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/118.jpg)
http://demos.telerik.com/silverlight/#RichTextBox/MSWord (Telerik)
Telerik rich textbox
![Page 119: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/119.jpg)
Helps the user enter more data related to that field Should call a popup form
Do you use ellipses buttons?
![Page 120: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/120.jpg)
Do you use ellipses buttons?
![Page 121: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/121.jpg)
http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Controls.aspx
Lots more:
![Page 122: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/122.jpg)
6. Reports
![Page 123: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/123.jpg)
![Page 124: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/124.jpg)
A display containing more than four perceptual units of information cannot be understood at a glance
Do you make graphs easy to digest?
![Page 125: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/125.jpg)
Do you make graphs easy to digest?
![Page 126: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/126.jpg)
![Page 127: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/127.jpg)
http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Reports.aspx
Lots more:
![Page 128: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/128.jpg)
7. Web UI
![Page 129: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/129.jpg)
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!
![Page 130: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/130.jpg)
Treat your users like monkeys!
![Page 131: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/131.jpg)
Bad banana!
![Page 132: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/132.jpg)
![Page 133: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/133.jpg)
![Page 134: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/134.jpg)
![Page 135: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/135.jpg)
![Page 136: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/136.jpg)
?
How do I know where I am?
![Page 137: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/137.jpg)
Do you know to use Breadcrumbs?
Note the links.... What is the exception? ....
![Page 138: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/138.jpg)
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
![Page 139: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/139.jpg)
SharePoint
![Page 140: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/140.jpg)
![Page 141: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/141.jpg)
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?
![Page 142: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/142.jpg)
Via CSS ...
Do you know the correct way to display a hyperlink?
Rollover effect
Visited links
Normal links
Must be in this order!
![Page 143: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/143.jpg)
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
![Page 144: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/144.jpg)
Via CSS:
![Page 145: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/145.jpg)
Custom for SSW Filters image links and other parameters ...
Via jQuery
![Page 146: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/146.jpg)
‘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
![Page 147: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/147.jpg)
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
![Page 148: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/148.jpg)
Warning: Not mainstream HTML 5 does not have the TARGET On the purchase page add “terms and conditions
(opens in a new window)” http
://www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsitesNavigation.aspx#ManageExternalLinks
Should external links open in a New Window?
![Page 149: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/149.jpg)
http://www.ssw.com.au/ssw/Events/Scrum-Training-Course.aspx
Do you save clicking through?
![Page 150: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/150.jpg)
http://www.ssw.com.au/ssw/Events/Scrum-Training-Course.aspx
Do you save clicking through?
![Page 151: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/151.jpg)
Do you indicate which fields are required?
Prevents a wasted trip to the server
Should get the required fields right the first time around
http://www.ssw.com.au/ssw/standards/rules/RulestoBetterInterfaces-Controls.aspx#CorrectValidationFocus
![Page 152: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/152.jpg)
Do you use icons in web pages to indicate status directly?
![Page 153: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/153.jpg)
Do you use icons in web pages to indicate status directly?
![Page 154: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/154.jpg)
For Validation Errors, don’t assume they have to read a messageboxAutomatically focus on the control
Note: Balloons also direct the eye…
Do you use SetFocusOnError on controls that fail validation
![Page 155: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/155.jpg)
![Page 156: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/156.jpg)
![Page 157: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/157.jpg)
![Page 158: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/158.jpg)
What’s important ?
Do you have a consistent search results screen?
![Page 159: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/159.jpg)
A statement that explains the criteria Pages navigation Number of results found Filters at the top ...
Do you have a consistent search results screen?
![Page 160: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/160.jpg)
![Page 161: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/161.jpg)
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 …
![Page 162: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/162.jpg)
![Page 163: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/163.jpg)
? Use SSW Link Auditor
www.ssw.com.au/ssw/LinkAuditor
Broken Links are inexcusable!
![Page 164: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/164.jpg)
Master pages CSS
Do you know the two things to create a consistent look and feel?
![Page 165: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/165.jpg)
Do you give the 6 options to share?
![Page 166: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/166.jpg)
Do you make the logged in state obvious?
![Page 167: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/167.jpg)
www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsitesNavigation.aspx
Lots more:
![Page 168: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/168.jpg)
6. Mobile Interfaces
![Page 169: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/169.jpg)
First impressions: You only get one shot
![Page 170: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/170.jpg)
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...
![Page 171: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/171.jpg)
?
When do you build a iPhone app vs iPhone web app?
![Page 172: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/172.jpg)
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
![Page 173: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/173.jpg)
?
When do you build a WP8 app vs an iPhone app?
![Page 174: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/174.jpg)
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
![Page 175: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/175.jpg)
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
![Page 176: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/176.jpg)
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
![Page 177: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/177.jpg)
WP8 has resolved those problems and is perfect in every way
<3
WP8 app vs iPhone app
![Page 178: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/178.jpg)
Others reasons are: You can deploy your app without going through the
appstore/market place. E.g. my SSW business appAppstore: NoMarket place: Yes (hidden)
WP8 app vs iPhone app
![Page 179: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/179.jpg)
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
![Page 180: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/180.jpg)
Do you know what guidelines to follow for WP8?
User Experience Design Guidelines for Windows Phonehttp
://msdn.microsoft.com/en-us/library/windowsphone/design/hh202915(v=vs.92).aspx
WP8 app vs iPhone app
![Page 181: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/181.jpg)
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
![Page 182: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/182.jpg)
www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Mobile.aspx
Lots more:
![Page 183: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/183.jpg)
7. Controversy!
![Page 184: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/184.jpg)
?
![Page 185: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/185.jpg)
Well, we had a few in the presentation...
![Page 186: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/186.jpg)
Technology is intimidating. People are afraid to break the system or lose the data.
Encourage experimentation, increase comfort Have reversible actions (Undo) Previewed actionsAvoid dialogs unless there’s a system error (not user error) Track user preferences and defaults, *remember recent*
Comfort of Learning
![Page 187: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/187.jpg)
Rules to Better Interfaceshttp://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces.aspx
Rules to Better Website Layoutshttp://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesLayout.aspx
Resources
![Page 188: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/188.jpg)
Resources
![Page 189: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/189.jpg)
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.
![Page 191: Interface Usability - Adding Schweppervescence](https://reader030.vdocuments.mx/reader030/viewer/2022013013/587ae28c1a28ab542b8b6af3/html5/thumbnails/191.jpg)
Find me on Slideshare!http://www.slideshare.net/SSWConsulting/