Web HCI, Web Usability, Page and Site Design

Web HCI, Web Usability, Page and Site Design

Web ApplicationsCT050-3-2

Web Applications Slide 2 of 66


Topic & Structure of the lesson

• Human-Computer interaction (HCI)• User-centered Design Principles• User Interface Controls• Input Design• Output Design Issues• Screen Resolution• Navigation• Page Necessities• Web-Safe Color • Color Schemes



Topic & Structure of the lesson

• Size• Thumbnail



Learning Outcomes

At the end of the module, your should be able:• To explain the concept of user interface design and

human-computer interaction• To describe user-centered interface design principles• To describe guidelines for user interface design• To describe user interface controls• To explain input design concepts, techniques, and

methods• To apply good design principles.• To gain hands-on experience designing web sites and

web pages that adhere to the elements of good web design



Key Terms you must be able to use

If you have mastered this topic, you should be able to use the following terms correctly in your assignments and exams:• HCI• User-centered Interface



Human-Computer interaction (HCI)

• Describes the relationship between computers and people who use them

• HCI concepts apply to everything from PC’s to the global networks

• Developers main objective is to create user-friendly design that is easy to learn and use



User-centered Design Principles

• Understand the underlying business functions• Maximize graphical effectiveness• Profile the system’s users• Think like a user• Use prototyping• Design a comprehensive interface• Continue the feedback process• Document the interface design



User Interface Design Guidelines

• Create a design that is easy to learn and remember– Label clearly all controls, buttons, and icons– Select only those images that users can

understand easily– Provide on-screen instructions that are

logical, concise, and clear– Show all links/pages in a list of menu items– Make it easy to return to one or more levels in

the Web site




• Provide features that promote efficiency– Organize pages, tasks and functions in

groups– Create hierarchical menu lists– Provide shortcuts/shortcut keys (AccessKey –

Keyboard shortcut use by ASP.NET control, alt + key)

– Use default values– Use a natural language feature




• Make it easy for users to obtain help or correct errors– Ensure that help/faq is always available– Provide a direct route back from Help– Include contact information– Require user confirmation before data

deletion– Use hypertext links




• Minimize input data problems– Provide data validation checks– Display event-driven messages and

reminders– Establish a list of predefined values – Build in rules that enforce data integrity

(complete)– Use input masks (restricts text entry inside a

preset mask), or templates, that make it easier to enter data




• Provide feedback to users– Display messages at a logical place on the screen– Alert users to lengthy processing times or delays– Allow messages to remain on the screen long enough

for users to read them– Let the user know whether the task was successful or

not– Provide a text explanation (alt) to identify the control

button– Use messages that are specific, understandable, and

professional




• Create an attractive layout and design– Use appropriate colors to highlight different areas of the screen– Use special effects sparingly– Use hyperlinks– Group related objects and information– Keep screen displays uncluttered– Display titles, messages, and instructions in a consistent manner– Use consistent terminology– Ensure the commands will always have the same effect– Ensure that similar mouse actions will produce the same result– Require the user to confirm data entry




• Use familiar terms and images– Stick to a pattern– Use familiar functions/operations– Provide a similar look and feel– Avoid complex terms and technical jargon



User Interface Controls

• Design screens that are attractive, easy to use, and workable

• Control features include:– Menu bars– Toolbars– Dialog boxes– Text boxes– Toggle buttons



User Interface Controls

• Control features include:– List boxes– Scroll bars– Drop-down list boxes– Option buttons– Check boxes– Command buttons– Progress bars – Calendars



Input Design

• Online input– Data is validated and available immediately



Input Design

• Six main input design objectives1. Select suitable input and data entry method2. Reduce input volume3. Design attractive data entry screens4. Use validation checks to reduce input errors5. Design required source documents6. Develop effective input controls



Input Design

• Input volume– Guidelines for reducing input volume

• Input necessary data only• Do not input data that can be retrieved from

system files or calculated from other data• Do not input constant data• Use codes (M & F, Y & N)



Input Design

• Form filling is the most effective method of online data entry

• Effective screen design guidelines– Restrict user access to screen locations where data is

entered– Provide a descriptive caption for every field– Display a sample format if a user must enter values

in a specific format – Display default values– Use default values for constant entries– Display a list of acceptable values for fields



Input Design

• Effective screen design guidelines– Provide a way to leave the data entry screen without

entering the current record (Cancel or Reset)– Provide the opportunity to confirm to confirm the

accuracy of input data– Provide for movement among fields in a standard

order (the tab order of control, TabIndex) or any chosen order

– Design the screen form layout to match that of the source documents

– Allow users to add, change, delete, and view records– Provide for users to search for specific information



Input Design

• Input errors– Fewer errors mean better data quality– Types of data validation checks

1. Sequence checks2. Existence checks3. Data type checks4. Range checks5. Validity checks



Input Design

• Form layout guidelines – Allow sufficient space– Offer clear instructions– Provide logical organization– Use captions (title) effectively



Input Design

• Input control– Measures to ensure that data is correct,

complete, and secure• Effective source document design• Data validity checks• Log files for rejected records• Data security measures, including encryption• Password and sign-on procedures



Output Design Issues

• Types of output– E-mail– Printer– Screen

• Printed reports are convenient and sometimes necessary



Screen Resolution

• Why do we still design for 640x480 screen resolution?? – Printing– Not browsing at the maximum browser size



Screen Resolution

Scenario designed for

640x480 width

640x480 height

800x600 width

800x600 height

1024x768 width

1024x768 height

Safest recommendation (with scroll bar)

584 290 744 410 968 578

Safest recommendation (with scroll bar) 5.0+ Win & Mac (with scroll bar)

588 290 748 410 972 578

Windows only (with scroll bar) 616 290 776 410 1000 578



Site Structure

• It’s important to be organized when designing a web site.

• It is good practice to organize your web site files into functional folders.

• Put all of your images in one folder, all of your documents in one folder.



Navigation

• Navigation is an essential aspect of any web site, and a natural way to incorporate content and page layout that can work together to guide the user through your site.

• Navigational elements and cues also add an essential efficiency for browsing around your site quickly and easily.

• Users should never have to wonder where a link in your navigation would take them.



Navigation

• Short, sweet, and to the point links should be used in navigation.

• Remember rule of usability: “Don’t Make Me Think!”

• Carrying a consistent navigational bar throughout your site allows a user to discover where he or she wants to be without having to go back to the top page of the site and drill down through another section.



Page Necessities

• Each page needs a base of information to gain credibility.

• User’s want to know the following information:– Who created and sponsored the page.

• You should have the logos of your page or your page’s sponsors in the upper left corner of the page. Also remember to include an e-mail address for contact persons.

– What the page content is. • Each page should have a title and a heading. This

information gives the user a summary of the content in one glance.



Page Necessities

– When the content was last modified. • Users want to make sure that what they are reading is up to

date.– Where the web page resides.

• It’s important to include your physical location on your pages. Sometimes it’s necessary for a user to contact you via snail mail! Physical address also allows the user to know what time zone you are in.

– How to view the material. • If the user needs a software programs to extend the

capabilities of his/her Internet browser in a specific way (a.k.a. – a Plug-In), you must include:

– Text that informs the user which plug-in needs to be installed in order to access the material

– URL of a site where you can download a free version of the plug-in



Web-Safe Color

• In the mid 90s, the majority of computer users had 8-bit video cards that could only display 256 colors.

• Considering the average eye can distinguish up to 16 million colors, trimming the colors in graphics was quite difficult.

• The “web-safe color palette” ensured the developer, as much as is possible, that the colors intended would actually appear correctly on every platform and all browsers.

• The web-safe color palette is comprised of 216 unique colors that will not dither (map to other colors). Each color has a corresponding value.

• You can view these 216 colors and their codes at: http://www.lynda.com/hexv.html.

http://www.lynda.com/hexv.html

http://www.lynda.com/hexv.html



Web-Safe Color

• Since the majority of users have video cards that can handle millions of colors, “the justification for using the browser-safe palette has diminished greatly if you are developing your site for users who have current computer systems.” – Lynda Weinman http://www.lynda.com/hex.html.

• So why even mention the Web-Safe Color Palette?

• Because history is important! And, the web-safe color palette is built-in to most applications.

http://www.lynda.com/hex.html

http://www.lynda.com/hex.html



Color Schemes

• Background colors are often used with text heavy content to provide a more comfortable and inviting reading environment.

• Color contrast, especially regarding luminosity (lightness/darkness) is an important issue when using text over backgrounds.

• Black text on a white background is an obvious example of extreme, and useful contrast.

• Examples lacking contrast are dark on black, pastel on pastel, or primary on primary.

• Each of these demonstrates how colors will interact and prevent one from obtaining the content.



Size

• Connection Speed: Dial-up modems still exist!– 40 KB file would take approximately 12 seconds to download.– 1 MB files would take approximately 30 minutes to download.

• A general rule (which can be broken if necessary!) is that graphics should not be any larger than 400 pixels in width or height. There are a few reasons for this “rule”:– Real Estate: Because not everyone has a high screen

resolution, large graphics can easily compete with the content of a page. Make sure to crop unnecessary information out of images.

– Download Time: Typically, the more physical space the graphic takes up on screen, the larger the file size. Big file sizes and long download times make users reach for the back button!



Thumbnail

• If you need to have high quality photos online, but you don’t want to force your users to wait a half hour to download one page, you can use what are called thumbnail images.

• Thumbnails are smaller, lower quality versions of your photos.

• Typically, people link thumbnails to a larger version of an image. Using thumbnails allows your users to pick which photos they want to view at a high quality (and thus long wait time).



Resources



Q & A

Question and Answer Session

Documents

Web HCI, Web Usability, Page and Site Design