Transcript Variance in relevance measurements and the measurement of

Web Pages as User Interfaces: Forms
and Web Applications
Presented by
Krishnan Ayyer
Information Architecture and Design
Fall 2005.
Overview









Introduction
History
Examples
Web widgets
IA and User Interfaces
Design guidelines
Future
Conclusion
References
Introduction
User Interface

The user interface is the aggregate of means by which
people (the users) interact with a particular machine,
device, computer program or other complex tool (the
system). The user interface provides means of:

Input, allowing the users to control the system

Output, allowing the system to inform the users (also
referred to as feedback)
Some common types of User Interfaces





Graphical User Interfaces (GUI’s)
Web based User Interfaces
Command line Interfaces
Touch Interfaces
Batch Interfaces
History of User Interfaces
The history of user interfaces can be divided into the
following phases according to the dominant type of user
interface:



Batch interface, 1945-1968
Command-line user interface, 1969-1983
Graphical user interface, 1984 to present
History

Doug Engelbart's Augmentation of Human Intellect
project at SRI in the 1960s developed the On-Line
System (NLS), which incorporated a mouse-driven
cursor and multiple windows
History



Xerox PARC
invented was the laser printer, a natural complement to
Xerox's copier business
Invented their own computer called The Alto in 1973
which provided a more graphical way to interact with the
printer
History




Apple
GUI pioneers, was a small startup founded in a garage in
1976 by Steve Jobs and Steve Wozniak, called Apple
Computer
Apples next generation interface was LISA
Use of drag and drop, icons used to depict all files
Current GUI’s

Lets have a look at some of the features of the latest
Windows version, Windows Vista.
http://channel9.msdn.com/showpost.aspx?postid=11469
4&pvrid=5
Examples of bad web UI


The best way to become skilled at good web UI is to
learn from bad designs.
Here are some examples
http://www.webpagesthatsuck.com/speeches.html#video
Moral of the story




Use flash discreetly
Don’t use flash for the sake of it. Remember the
objective is to help the user
As Jacob Nielsen says
99% of Flash on websites are bad as they distract from
the core values of the site
Don’t make navigation a nightmare for users
Web Widgets or Forms






Hyperlinks
Text Field
Buttons
Radio buttons
Check Boxes
Drop Down menus
Hyperlinks


Hyperlinks are the backbone of the World Wide Web
They are the tools to navigate from one web site to
another
Syntax in HTML
<a href="url">Text to be displayed</a>
Example
<a href=“ http://www.ischool.utexas.edu”> Ischool
link</a>
Text Field

Text fields are used when you want the user to type
letters, numbers, etc. in a form.
HTML syntax
<input type="text" name=“sample">
<input type=“password” name=“password”>
<textarea rows="5“
Example
cols="20">… </textarea>
Buttons
Used to transfer content of the form to another file or
reset contents of current one.
 Content is transferred using action tag in conjunction
with Submit button
HTML syntax
< input type=“submit”>
 To submit a web form
<input type=“reset”>
 To clear a web form

Radio Buttons


Radio buttons are used when there is a list of two or
more options that are mutually exclusive and the user
must select exactly one choice
Clicking a non-selected radio button will deselect
whatever other button was previously selected in the list
Checkboxes


Checkboxes are used when there are lists of options
and the user may select any number of choices,
including zero, one, or several
Each checkbox is independent of all other checkboxes
in the list, so checking one box doesn't uncheck the
others


Most of you probably think that the difference between checkboxes
and radio boxes are fairly obvious, but plenty of websites seem to
get it wrong.
Lets have a small quiz
This is an extraction from a website. Do you spot any mistake????
Stay informed! Get updates about featured products, solutions,
services and educational opportunities. Let Foobar Corp. and
selected organizations provide you with information about other
offerings. May we send you updates using e-mail?
Yes, please use e-mail to send me information about other
offerings.
If you prefer, we will not contact you using the data you provided in
this instance.
Please do not use the contact details provided here to send me
information about other offerings.
Mistakes!!!!!!!!

Mistake #1 : The erroneous use of checkboxes where radio buttons
should be. Because the two choices above are mutually exclusive,
the page should present users with radio buttons, which restrict
them to selecting exactly one option

Mistake #2 is to present two questions in the first place, and then to
put them in a big, verbose box. A single, shorter question would be
far better here: "Yes, send me information about other featured
products, solutions, services, and educational opportunities."
Drop down menus




Designers employ drop-down menus for a variety of
different purposes, including
Command menus, which initiate an action based on the
option users select
Navigation menus, which take users to a new location
Form fill-in, which lets users select an option to enter
into a form field
Attribute selection, which lets users choose a value
from a menu of possible values
- Jacob Neilsen
Information Architect perspective




There are a large variety and types of web widgets
available, but use them discreetly.
The structure of the widgets on the interface is very
important.
Always keep the user in mind while designing the
interface.
Use flash and fancy drop down menus very carefully.
Ideally avoid them if possible.
Some Web UI Design guidelines







Design in a style that will appeal to your audiences taste
Test the User Interface
Maintain consistency in the visual design
Present your message effectively and avoid clutter
Draw attention to new or greatly changed content
Avoid requiring the users to scroll too much to see to content
Use the right web widgets for the appropriate kind of task
Resources for design guidelines
Apple User Interface guidelines
 http://developer.apple.com/documentation/UserExperience/Concept
ual/OSXHIGuidelines/XHIGIntro/chapter_1_section_1.html
IBM web design guidelines

http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/572
Microsoft guidelines

http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnwue/html/welcome.asp
Future

So where is the future of Web UI application heading.
Here is an interesting Web UI application which combines
the physical and the virtual web world
http://grouplab.cpsc.ucalgary.ca/phidgets/gallery/

Persuasive technology
http://captology.stanford.edu/examples.html
Conclusions




Web UI design is about designing for the user, designers
forget this
While using web widgets give importance to consistency
in labeling and structure
Adhere to a logical order while designing forms and don’t
jumble up between two types of widgets!!!
2 key things Users Users Users !!!!!!!!!!
Test Test Test !!!!!!!!!!!!!
References






Apple UI guidelines
http://developer.apple.com/documentation/UserExperience/Concept
ual/OSXHIGuidelines/index.html
Jacob Neilsen’s Alertbox
http://www.useit.com/alertbox/20050103.html
Stanford University Persuasive Technology Lab
http://captology.stanford.edu/examples.html
GUI History Wikipedia
http://en.wikipedia.org/wiki/History_of_the_GUI
Phidgets
http://grouplab.cpsc.ucalgary.ca/phidgets/gallery/
Microsoft Vista Demo
http://channel9.msdn.com/showpost.aspx?postid=114694&pvrid=5
Questions?