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“ cols="20">… </textarea> Example 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/en- us/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?
Pages to are hidden for
"ayyer_webpages_as_ui"Please download to view full document