• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Interface usability-adding-schweppervescence-ver3-8
 

Interface usability-adding-schweppervescence-ver3-8

on

  • 195 views

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

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

Statistics

Views

Total Views
195
Views on SlideShare
195
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • TODO: Include text for first two pts
  • Don’t delete –this is the version number for SlideShare
  • TO DO Add Schweppervescenceimg
  • TODO: Include text for first two pts
  • http://www.ssw.com.au/ssw/standards/rules/RulestoBetterInterfaces-general.aspx#SelfEvident
  • I am embarrassed by this
  • Adam looks weird here...
  • Section header
  • Look I don’t know and I don’t care
  • http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-General.aspx#EasySearch
  • http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-General.aspx#EasySearch
  • TODO: Make pictures bigger
  • http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-General.aspx#HomePagePortal
  • 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.
  • So cliche...
  • http://skunk/ssw/Standards/Rules/RulestoBetterInterfaces-Forms.aspx#DataEntryForms Remembering recentsearchs
  • http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-General.aspx#messagebox
  • http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-General.aspx#Popup
  • So cliche...
  • http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Data.aspx#AllInComboBoxes
  • FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF-
  • http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Data.aspx#UseCheckBoxThey store dataDon’t use them to perform actions!Use a button instead
  • FAIL!
  • http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Data.aspx#RichTextboxNotesTO DO: Why this isn’t in controls/move to controls
  • http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Forms.aspx#ElipsisForDialogs
  • So cliche...
  • http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesLayout.aspx#Breadcrumb
  • http://www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsitesNavigation.aspx#OneLink
  • 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
  • TODO thing with footer
  • http://www.ssw.com.au/ssw/Standards/rules/RulesToBetterWebsitesNavigation.aspx#ManageExternalLinks
  • (non-important)TODO: Give Adam two very long pages1. one using css2. One using jquery
  • 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.
  • http://www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsitesNavigation.aspx#ClickingThroughIT’S AN AD!!!
  • http://www.ssw.com.au/SSW/Standards/Rules/RulesToBetterWebsitesNavigation.aspx#ClickingThroughIT’S AN AD!!!
  • http://www.ssw.com.au/ssw/standards/rules/RulestoBetterInterfaces-Controls.aspx#CorrectValidationFocus
  • http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesLayout.aspx#StatusIcon
  • http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterWebsitesLayout.aspx#StatusIcon
  • http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfaces-Data.aspx#CorrectValidationFocus
  • 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
  • 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
  • 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.
  • Shorts in winter guy
  • TODO: Include text for first two pts
  • Move this to OWN SECTION

Interface usability-adding-schweppervescence-ver3-8 Interface usability-adding-schweppervescence-ver3-8 Presentation Transcript

  • Interface UsabilityAdding SchweppervescenceAdam CoganChief Architect at SSWMicrosoft 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 LearningTechnology is intimidating. People are afraid to break the system orlose 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??
  • 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.
  • 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.
  • About AdamChief Architect at SSW  Developing custom solutions for businesses across a range of industries such as Government, banking, insuranceMicrosoft Gold PartnerMicrosoft Regional DirectorVSTS MVP@AdamCogan Future Thinking. Immediate Results.
  • 1. General Usability Practices Future Thinking. Immediate Results.
  • Do you intuitively know how to usesomething?
  • A thermostat
  • VS
  • Do you realize that when it comes tointerface 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.
  • Do you realise people scan, not read? You‟re late for a flight and you need to check in …
  • Do you know to use storyboards? Google: SSW storyboarding
  • Is your data easy to search?
  • What is more important than search? TOUCH
  • 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 assimple as possible?
  • Do you make matrix columns assimple 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
  • Do you make the homepage a portal? Make it more than just navigation Put useful current information on the homepageE.g. Top billing customers for the month and a button under it for adding an invoiceE.g. See the number of bugs counted by the most common Future Thinking. Immediate Results.
  •  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
  • Include extra information if it gives youcontext Put all options in even if some aren‟t selectableLet‟s look at two examples: Checkbox Image…
  • 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 eachpage or form?
  • Help - Do you help users when they geterrors 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 itemsevery "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 | TrainingVideos" item?
  • Menu - Do you have your "Help | UserGuide" online? Easier to keep up-to-date and maintain Stats on usage Allows community commenting
  • 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…
  • Not even Apple could makethe popup less annoying
  • Do you avoid message boxes?
  • 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 areconcise and informative? Is it ok to cancel?
  • Do you use messages that areconcise and informative? Microsoft uses this one
  • 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
  • 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 dropdownlists? Less is more! Select all should be “-All-” Note: if you want to select nothing then add an entry to the dropdown for (null)
  • Rule #9http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterBusinessIntelligence.asp x#AllDimensionsTag
  • Do you include the number ofresults in drop down list? When you use a combo box, its very helpful to be able to see at a glance how many results can be expected
  • What if user wants to sort by either alphabeticalor numerical?
  • What‟s a better way to do this???
  • Radio buttons…
  • Do you use Text Boxes for displayingdata? users know it is data, not a label of the application users can copy and paste from the field
  • Which is better? A: Neither, use a checkbox!
  • Good
  • What‟s wrong with this?
  •  Better Example
  • 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 areunavailable?
  •  What‟s wrong with this?
  • Do you know when to use rich textboxes? A plain textbox limits the detail of the users 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?
  • What‟s wrong with this?
  • Lots more: http://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInt erfaces-Controls.aspx
  • 6. Reports
  • 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?
  • 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!
  • 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
  • Do you know the correct way todisplay 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.
  • Do you know the correct way todisplay a hyperlink? Via CSS ... 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 2010 Ultimate Coded UI test!
  • Should external links open in a NewWindow? 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 aroundhttp://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 oncontrols that fail validation For Validation Errors, don‟t assume they have to read a messagebox Automatically focus on the controlNote: Balloons also direct the eye…
  • 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 ...
  • Do you always give more informationunder “Did not match anything”? Websites are continually saying „404 – page not found‟ or „your search did not match anything This should be avoided
  • Broken Links are inexcusable! ? Use SSW Link Auditor (www.ssw.com.au/ssw/LinkAuditor)
  • Do you know the two things to createa consistent look and feel? Master pages CSS
  • 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 vsiPhone web app??
  • iPhone app vs iPhone Web app Depending on  budget  usage of native API  existing web app and just add CSS Note: An iphone (or WP7.5) web app without a network connection, will not load the web page you were on previously
  • When do you build a WP7.5 app vs aniPhone app??
  • WP7.5 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
  • WP7.5 app vs iPhone appThe biggest thing going for Windows Phone 7.5 is:  .NET dev shops  environment more productive than xcode
  • WP7.5 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 7.5
  • WP7.5 app vs iPhone appOthers 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)
  • WP7.5 app vs iPhone app Turn around through the appstore is quicker: Appstore: 1-3 weeks Market place: 2 days (Quicker since it is managed code. Unmanaged code is easy to spot) App store is more aggressive in blocking apps
  • WP7.5 app vs iPhone app Do you know what guidelines to follow for WP7.5? Interaction guide from MS (whitepaper)http://social.msdn.microsoft.com/Forums/en/windowsphone7serie s/thread/7365b3c6-9fdc-48fe-bf17-192c71f2a49f
  • WP7.5 app vs iPhone app Tip: if you‟re writing your own user controls, you‟re probably doing it wrong Silverlight.CodePlex.com
  • 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 LearningTechnology is intimidating. People are afraid to break the system orlose 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 Interfaceshttp://www.ssw.com.au/ssw/Standards/Rules/RulestoBetterInterfa ces.aspx Rules to Better Website Layoutshttp://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 | Adelaideinfo@ssw.com.auwww.ssw.com.au
  • Find me on Slideshare!http://www.slideshare.net/SSWConsulting/