|
home o
portfolio o newspaper
research o usability & interface design o
ksu classes
o other resources |
|||
 |
|||
|
Return to Course Reports. These files were produced as part of the requirements for LIS 61095 User & Task Analysis for Interface Design. Select body font size:
|
Carrie Garzich :: Site Convention Report Overall, there were a few conventions that stood out as being fairly consistent across the sites, particularly in icons: shopping carts (e-commerce), printers (printable version), envelopes (email content), etc. Additionally, "Go!" was frequently used to indicate searches, and variations on a triangle and brackets were used both to indicate a place to go and as a indicator of hierarchy in breadcrumbs. Navigation and layout varied fairly widely, as did the formatting for links. "Amateur" sites, and those with more daring design (which tended to be the same group), tended more towards CSS-manipulated design elements and more often broke from traditional conventions (such as blue-underlined links). Professional Representative: New York Times Online (http://www.nytimes.com) This site uses one of the most traditional Web layout and navigation sets around — site identification at the top, navigation links down the left side, content in the middle and miscellaneous stuff (with advertising) on the side. In addition, it uses a number of traditional conventions, as detailed in the conventions report. Amateur Representative: Brainstorms & Raves (http://www.brainstormsandraves.com) While a lot of amateur sites on the Web do consist of Jane's first experiment with FrontPage, complete with garish backgrounds and animated GIFs, there are a lot of very well-designed amateur sites out there. To me, this site is representative of them because it's edgier in its design than a professional site would be, with a greater use of CSS. 1. Adobe (http://www.adobe.com :: professional) • Circle buttons with right-pointing triangles inside — indicates going somewhere • Underlines under links • Check mark next to things being ordered • Drop-down menus (likely Javascript) across top of screen • Shopping cart icon to go to e-commerce component • Television icon for video • Left-pointing triangles for breadcrumbs • Navigation across top, content below • Uses mostly traditional Windows form elements, without CSS manipulation 2. Amazon.com (http://www.amazon.com :: professional) • Right-pointing triangles — indicates going somewhere • Underlines under links (mostly blue) • Exclamation point indicates messages that require attention • Shopping cart icon indicates shopping cart • Circular GO! button with exclamation point indicates going to get results of a search • Navigation links down the left side, navigation on the top with some identifying material, content in the center, extra stuff down the right • Text-based breadcrumbs, with ">" brackets for arrows and blue-underlined links • Uses mostly traditional Windows form elements, without CSS manipulation 3. MIRC Homepage (http://www.mirc.com :: professional) • Underlines under links (all blue) • Navigation links down the left side, content in the center out to the right • Gray GO button indicates going to get results of a search • Uses entirely traditional Windows form elements, without CSS manipulation 4. Found Magazine (http://www.foundmagazine.com :: professional) • Uses rollover text-based links, no underlines • Navigation links down the left side and across the bottom, content in the center out to the right 5. New York Times Online (http://www.nytimes.com :: professional) • Uses underlines for links (mostly blue, but red underlines can indicate sections as opposed to stories) • Right-pointing triangles indicate somewhere to go • Right-pointing ">" inside a circle indicates getting search results • Graphical "Go" button to retrieve information • Home and section pages: navigation links down the left side, identifying material and advertisement on the top, content in the center, extra stuff-down the right • Uses mostly traditional Windows form elements, without CSS manipulation • Envelope icon indicates ability to email story • Printer icon indicates ability to print story • Breadcrumbs are blue, underlined link, text-based and use ">" as a divider • Red box with "$" icon indicates something you have to pay for • "Next >>", which is blue underlined text, indicates going to the next page of a story 6. Beatnik Pad (http://www.beatnikpad.com :: amateur) • Uses underlines, but a dashed underline, for links, as well as some graphical-text links • Uses emoticons • Content on the left-to-center, links and miscellaneous information on the right side, identifying information and navigation on the top • Uses CSS manipulated Windows form elements 7. The Daily Report (http://www.zeldman.com :: amateur) • Uses rollover text-based links (no underlines) and Javascript-based rollover links • Uses CSS manipulated Windows form elements • "Go!" button indicates going to results of search • Navigation on left, content on right, identifying information on the top 8. Brainstorms & Raves (http://www.brainstormsandraves.com :: amateur) • Some underlined text for links, but menu features rollover text links, also some graphical text links on navigation • ">>" indicates someplace to go in menu/laundry list of links • Uses CSS manipulated Windows form elements • Content on the center-left, identifying information and some navigation across the top, miscellaneous information and links on the right • "Go!" button indicates going to results of search • ">>" used to indicate subcontent under a subtopic • Buttons indicate ability to change font sizes 9. Wired News (http://www.wired.com :: professional) • Links change color on rollover, but are still blue underlined; some navigation links are graphical text rollovers • Some traditional and some CSS manipulated Windows form elements • "SEARCH" spelled out to indicate getting results of search • Letter "A" in various sizes indicates ability to change font sizes • Home and section pages: navigation links and identifying information across top, miscellaneous links and content down left and right sides, primary content down center • Camera icon indicates photographs • Envelope icon indicates ability to email story • Printer icon indicates printable version • "next >>", in blue underlined text indicates going to the next page of a story • Circular "recycle" arrows in an icon indicate related, older stories • Hammer icon designates "Story Tools" • Upwards-pointing arrow icon indicates today's stories 10. Homestarrunner.com (http://www.homestarrunner.com :: amateur) • Content on top, navigation on bottom • Text-based, non-underlined rollover links • Much of navigation within content is done through Flash
|
||
