Transcript UI Best Practices

UI Best Practices
Application Developer’s Intro School
Week 1 Day 1
Key Learning Points
• Understand the basic principles of User
Interface Design
• Apply the concepts of usability to Web
design
• Adopt and adapt Smart best practices to
development work
What is Usability?
• Something is easy to use to the extent that
it effectively performs the task for which it
is being used.
Why is Usability Important?
• It can mean the difference between the
success or failure of a system.
Usability Principles:
Mental Models
Usability Principles:
Task Analysis
Usability Principles:
Obviousness
Usability Principles:
Affordance
Usability Principles:
Consistency
Usability Principles:
Metaphors
Electronic Mall
Shopping Cart
Trash Can
Questions?
• Do you have any
questions about
usability?
Web Page Design:
Training the Web Users
• Web users cannot be trained to use a site.
• Sites should be designed to expedite
learning.
Web Page Design: Perceived
Stability vs. Regular Updates
• A site should change regularly to reflect
new information, but updating the content
should not involve changes to the
interface.
Web Page Design: Typography
• The first thing
a user sees in
a Web site is
the overall
patterns and
layout of the
page.
Web Page Design: Typography
• Serif vs. Sans Serif
• Proportional character spacing vs. fixed
character spacing
• Font size and color
• NEVER USE CAPS and avoid italics as
much as possible
• Avoid using: Blinking, Glowing, Scrolling
(marquee style) or Zooming effects on text
Web Page Design: Color
• Color is an
effective
communication
tool that can be
used to elicit
emotional
responses and
represent
hierarchies of
importance.
Web Page Design: Color
• Contrast colors for
better readability.
• Keep it simple.
– As a general rule,
using a light
background with a
dark text or a dark
background with
light text.
Web Page Design: Graphics
• Graphics are effective if the user
recognizes it, but if the graphic is outside
the user’s realm or experience, recognition
does not occur and the graphic loses its
power.
Web Page Design: Graphics
• GIF vs. JPEG
• Interlaced GIF – definitely; animated GIF –
maybe
• Use ALT tag for all images.
• Preview graphics on all possible browsers
and platforms
Web Page Design: Graphics
• Optimize your images for the web. Make
your pictures download fast for your
viewers. Use 72 dpi when scanning or
creating an image for the web.
46KB
6KB
See any difference?
Web Page Design: Navigation
• Any navigation element other than an
underlined hypertext link introduces a new
level of complexity for the user.
Web Page Design: Navigation
• Your user should be able to navigate to the
main sections (especially the home page)
on your site from every page.
Web Page Design:
Content Structure
• Reduce eye
movement
• Use left alignment for
text and headings
Web Page Design:
Content Structure
1. Show Importance
and Priority
Web Page Design:
Content Structure
2. Show Relationships
Family
relationship
Child
relationship
Web Page Design:
Content Structure
3. Aid scanning and
comprehension
Web Page Design: Frames
• Frames introduce a new mechanism for
viewing data, the ability to view multiple
pages simultaneously.
• Viewing multiple pages simultaneously
destroys the link between URL and
content.
Web Page Design: Testing
• Web sites must be tested and updated on
a regular basis.
– Existing links, content and images must be
verified.
– It must be viewed using new browsers and
platforms.
Web Page Design:
Cutting Edge Technology
• The Web is not an opportunity to show off
technical prowess.
Questions?
• Do you have any
questions about web
page design?
Smart Best Practices:
Page Elements
•
•
•
•
•
Background
Text
Header
Footer
Menu
Smart Best Practices:
Cascading Style Sheets (CSS)
• Existing intranet sites have CSS
• When developing a module for these,
adhere to the current CSS as much as
possible.
Smart Best Practices:
Optimal Loading
• Frames
• Load times
• Animation
Smart Best Practices:
Intuitiveness
• Visual cues
• Audible alerts
• Document mapping
Smart Best Practices:
Security
• Avoid simulating back button using
JavaScript
• Avoid using hidden fields
• Hide page source
Questions?
• This is the end of the
presentation.
• What questions do
you have?