Embed Size (px)
Citation preview
Awalin Sopan
Sr. Software Engineer, FireEye Inc.
@awalinsopan
Strive for consistency
Seek universal usability
Offer informative feedback
Design dialogs to yield closure
Prevent errors
Permit easy reversal of actions
Keep users in control
Reduce short term memory load
https://www.cs.umd.edu/users/ben/goldenrules.html
Designing the User Interface, 6th Edition
Consistent:
Color
Layout
Font
Visual hierarchy
Behavior
Behavior:
• If clicking a table row expands the row,
do it in all tables.
• Error message/ instructions should be
consistent and clear.
• Input forms and formats.
• Navigation: internal vs external links.
Visual hierarchy with font size and layout
Feedback:
Tell the users in place what they are doing wrong and how to fix it.
https://www.nngroup.com/articles/affordable_care_act_usability_issues/
Prevent Errors:
Be proactive than reactive:
tell the users the expected password pattern beforehand.
Carefully chose defaults.
Easy Reversal: Don’t make the users retype everything for one mistake.
Move fast.
May ignore user research/ usability testing.
If they have UX, UX must be at least 1 sprint ahead of development.
https://www.nngroup.com/articles/doing-ux-agile-world/
Leverage frameworks/ open source tools:
Layout: Bootstrap
Validation: http://formvalidation.io/
Developers:
White boarding/ sketching / low fidelity mockup.
Make quick UI prototype.
Get feedback before all functionality are completely written.
Are well informed about UI standards.
Part of user story writing.
Deploy prototype in server for quick feedback.
Consider UI Review like Code review.
Code does not go to production unless UI is approved by team.
Involve QA in testing UI standards:
If UI principles are broken, QA should report a bug.
Central repo/documentation of UI standards
With examples.
For both developers and testers.
Write UI components/widget library:
Reusable
Dynamic/ Configurable
Extendable:
DialogView can extend ModalView.
TreeView can be a subclass of GraphView.
Write a UI widget class:
What are the properties?
How does it look?
How does it behave/
how do users interact with this
component?
