In this chapter the author talks about navigation. In a real space, such as a store, signs are hung from the ceiling to direct customers to different sections. In virtual space, such as the web, directions are even more important because “we’re inherently lost when we’re on the web due to no sense of location, direction or scale.” Web designers can do this by using navigation. Done correctly, navigation is the only direction you’ll need. “Link-dominant users” (aka: browsers) need clear navigation, without it they may get frustrated and leave the site or never come back again.
Designers should embrace web conventions. The basic elements of web conventions are: site ID (logo); sections (top level of hierarchy and subsections); utilities (help, about us); home and search. The site ID usually appears in the upper left corner and should have attributes of a brand logo – distinctive typeface and graphic. The utilities section should be less prominent than the other navigation. Home can be viewed as a fresh start or the North Star; it allows the user to return should they get lost. A way to search allows the “search-dominant user” (aka: the person who asks for help when they enter a store) to find their information directly.
Other vital information to include in navigation is page names, “you are here,” and breadcrumbs. Page names are like street signs on the web. They should use several visual cues: highlight, change color, frame and match the content, and they should be in the right place. “You Are Here” shows the user where they are. It can be displayed in the navigation bar or at the top of the page by putting a pointer next to it, changing the text color, use boldface, reverse the button, or change the color of the button. Lastly, breadcrumbs are the turn-by-turn directions on a website. Breadcrumbs should be at the top of the page in small type. It shows the user how they got there by displaying each levels, or sections and subsections, generally divided by the greater than symbol >.
To test if a site has good navigation, try the trunk test. Imagine being blindfolded in a trunk and then released at some point in a web site. If the site is well designed, the following questions should be answered without hesitation:
1. What site is this? Site ID
2. What page am I on? Page name
3. What are the major sections of this site? Sections
4. What are my options at this level? Local navigation
5. Where am I in the scheme of things? “You Are Here”
6. How can I search? Search button
Three related links to this chapter’s subject:
Jakob Nielsen’s, “Search and You May Find”
Iain Barker, “What is Information Architecture?”; Step Two Designs
Whitney Hess, “10 Most Common Misconceptions about User Experience Design”; Mashable
Sunday, July 31, 2011
Tuesday, July 26, 2011
Monday, July 25, 2011
Concept Statement project
Create a list of all users that may visit your site (not from the WWW but those you’d invite).
- Potential employers
- Freelance opportunities
- Colleagues
- Instructors
What will each of those users want to see in order to enjoy their visit to your site?
- Portfolio – examples of work
- Contact information
- Referrals
Name your intended audience (the person(s) you need to persuade.)
- Potential employers
- Freelance opportunities
Describe what you need to inform and persuade them of:
- Promote my: competency in graphic design
- Goals of the site are: attractive site that encourages exploration of portfolio and potential contact
- My ultimate message/philosophy (about who you are): that I’m creative and professional
- What is the story you are telling? I have experience in typesetting, print and graphic design and an incumbent to web design and interactive media
List the assets you need to persuade the user: Which 7 (minimum) projects? scans of what?, photos of what objects? images from what computer graphics program? what descriptive text? list them.
- Portfolio examples
- Images of a projector and projector screen (to display interactive media examples)
- Image of Multilith printing press and graphic of page with folder corner (to display print examples)
- Graphic of “www” letterpress block and code software window (to display web examples)
- Code to display twitter and blog on home page
- Buttons that look like antique typewriter keys (including rollovers)
- Thumbnails of portfolio examples
- Logo
- Descriptive text for all portfolio examples
Portfolio examples
Web
- Salon Halo
- Pacific Beach
- Pollen Allergy
Graphic Design
- Pierce County Library System (PCLS) mouse pad
- Retractable Banners
- Logo for bag
Print
- PCLS PCReads cookbook giveaway
- PCLS PC Reads event brochure
Interactive Media (swf files)
- Mesa Verde
- Glass museum slide show
- Louisiana cookbook
For the purpose of structuring your website portfolio pages, list the categories of work you will show. (for a Photographer, for example, it may be portrait, product, sports photography categories).
- Graphic design projects
- Print projects
- Web examples (school work)
- Interactive Media examples (school work)
Write a 200 word concept statement based on the user, your persuasion, navigation and the assets.
Concept Statement:
I’d like to create a professional-looking web site that attracts the viewer and encourages them to explore my portfolio and ultimately contact me for work. My mood board reflects old letterpress wood blocks and type which is reflective of my typesetter beginnings. I’d like to express my experience but have a look that is “hip” with today’s styles. The graphics and portfolio examples will convey to the user that I have knowledge and or experience in each field of work: web design, interactive media, print and graphic design. My potential user will primarily be potential employers and freelance opportunities, secondary user will be colleagues who will offer recommendations and referrals. The site will mature as I progress through my Bachelor’s degree in Web Design and Interactive Media at the Art Institute of Seattle, reflecting each course objective.
My assets will include graphics and images that I’ve created as much as possible. My portfolio examples will be work (graphic design and print) and school related (web design, coding, and interactive media). I will alter my current logo to reflect the current mood board for this class. I will be researching tutorials to create letterpress effects for my logo, images and graphics for this site.
Sunday, July 24, 2011
Week 2 Reading Response
Chapters 3, 4, 5: “Don’t Make Me Think” by Steve Krug
I enjoy reading this book – it’s so short and concise. I wish all my courses had books like this one!
Chapter 3 list five important things to make sure a user sees when “whizzing by”:
Chapter 4 was very short but noteworthy. It focused on the number of clicks to use on a website. The author recommends not focusing on “how many” clicks but instead think “how hard is it?” Is the user on the right scent when he/she navigates through the web site? Think in terms of two types of hierarchies:
• Wider Site = more categories, fewer levels, fewer clicks
• Deep Site = more levels, more clicks, fewer options at each level
Chapter 5’s “Omit Needless Words” struck a chord with me. I worked at an in-house graphic department for a library. The librarians loved words and our department’s goal was to reduce the text for print and web. Get rid of half and then half again. Be ruthless. It’s necessary for so many reasons: reduces noise, makes useful content more prominent, and makes for shorter pages.
“Happy talk and instructions must die” was an “aha” moment for me. For another class project I’m creating a web site for a non-profit group that uses “Happy talk” – introduction text that conveys no useful information. The mission statement is important but doesn’t need to be prominent on the “Home” page. Pointing out what makes them viable to the community would be more useful and interesting. Eliminate instructions, everything should be self-explanatory – if only the majority of web sites followed this convention, there would be far less aggravated users in the world!
I enjoy reading this book – it’s so short and concise. I wish all my courses had books like this one!
Chapter 3 list five important things to make sure a user sees when “whizzing by”:
- Create a clear visual hierarchy: the content on the page should clearly show relationships. A good visual hierarchy saves the user processing time by organizing and prioritizing. Pages should have three traits:
Prominence: if it’s more important – make it more prominent by using size, bold or color.
Grouping: If they’re related, group them together. Display it under a headline, use the same style, or put them in a defined area.
Nesting: sectioning content, one under the other to show this is a grouped category. - Conventions: embrace conventions. A clear example was given with the newspaper analogy: without ever being taught, we can read a newspaper. The convention of scanning and finding headings, captions and photo credits comes easily and it’s universal - it breeds familiarity. It you’re reinventing the wheel make sure it is clear and self-explanatory or adds value.
- Break up Pages: allows users to decide quickly which to use and which to ignore. I liked the $25,000 Pyramid examples: “Things I can do on this site;” “Links to today’s top stories;” “Products this company sells;” “Things they’re eager to sell me;” “Navigation to the rest of the site.”
- Make it obvious what’s clickable: don’t squander “the limited reservoir of patience and goodwill that each user brings to a new site.” Make links obvious and avoid making other content look like links (through the use of color, size, underline, etc.).
- Keep the noise down: don’t have background images competing for attention; avoid using lots of things going on at the same time.
Chapter 4 was very short but noteworthy. It focused on the number of clicks to use on a website. The author recommends not focusing on “how many” clicks but instead think “how hard is it?” Is the user on the right scent when he/she navigates through the web site? Think in terms of two types of hierarchies:
• Wider Site = more categories, fewer levels, fewer clicks
• Deep Site = more levels, more clicks, fewer options at each level
Chapter 5’s “Omit Needless Words” struck a chord with me. I worked at an in-house graphic department for a library. The librarians loved words and our department’s goal was to reduce the text for print and web. Get rid of half and then half again. Be ruthless. It’s necessary for so many reasons: reduces noise, makes useful content more prominent, and makes for shorter pages.
“Happy talk and instructions must die” was an “aha” moment for me. For another class project I’m creating a web site for a non-profit group that uses “Happy talk” – introduction text that conveys no useful information. The mission statement is important but doesn’t need to be prominent on the “Home” page. Pointing out what makes them viable to the community would be more useful and interesting. Eliminate instructions, everything should be self-explanatory – if only the majority of web sites followed this convention, there would be far less aggravated users in the world!
Friday, July 22, 2011
Letterpress Effect - code for web
Code for creating letterpress effect in web page text.
http://www.devlounge.net/design/gorgeous-headlines-with-font-face-and-letterpress-styles
http://www.devlounge.net/design/gorgeous-headlines-with-font-face-and-letterpress-styles
Tuesday, July 19, 2011
Sunday, July 17, 2011
Week 1 Reading Response
Summary of Intro, Chapters one and two: “Don’t Make Me Think” by Steve Krug
When I read in the Preface that the author’s goal was to keep it short, I thought it was an admirable goal but doubtful that it could actually be done. But I have to concede that the author has done just that. Not only has he kept it short but he talks in “normal” language – not a bunch of formal English where you have to look up every other word or scan backwards for the reference. I also enjoyed the humor and up-to-date references throughout the text and in the footnotes.
In the first chapter Krug states his first law of usability – “Don’t Make Me Think.” An image of my husband grumbling at the computer when searching the internet comes to mind and makes me laugh! He just wants to click and have the answers magically appear, as if the web designer knows exactly what he’s thinking! Eliminate the questions marks is truly apt in this situation. Make the site self-evident and don’t make the user think; and, in my opinion, the fewer times a user has to click to get to their destination the better.
Some of the points that stuck out to me and worth noting were:
• People don’t like to puzzle over how to do things
• Why should I think about how I want to search?
• If you can’t make it self-evident, at least make it self-explanatory
• Web pages need to work their magic at a glance
• Design as if it’s a billboard going by at 60 mph
• First reasonable option – example of a fire chief, who takes the first reasonable plan that comes to mind, examines it for problems, and not finding any, goes with it.
When I read in the Preface that the author’s goal was to keep it short, I thought it was an admirable goal but doubtful that it could actually be done. But I have to concede that the author has done just that. Not only has he kept it short but he talks in “normal” language – not a bunch of formal English where you have to look up every other word or scan backwards for the reference. I also enjoyed the humor and up-to-date references throughout the text and in the footnotes.
In the first chapter Krug states his first law of usability – “Don’t Make Me Think.” An image of my husband grumbling at the computer when searching the internet comes to mind and makes me laugh! He just wants to click and have the answers magically appear, as if the web designer knows exactly what he’s thinking! Eliminate the questions marks is truly apt in this situation. Make the site self-evident and don’t make the user think; and, in my opinion, the fewer times a user has to click to get to their destination the better.
Some of the points that stuck out to me and worth noting were:
• People don’t like to puzzle over how to do things
• Why should I think about how I want to search?
• If you can’t make it self-evident, at least make it self-explanatory
• Web pages need to work their magic at a glance
• Design as if it’s a billboard going by at 60 mph
• First reasonable option – example of a fire chief, who takes the first reasonable plan that comes to mind, examines it for problems, and not finding any, goes with it.
Saturday, July 16, 2011
Repost from Scott Mansfield's site
I like this website's web portfolio
http://andrewbradshaw.com/portfolio/category/web
http://andrewbradshaw.com/portfolio/category/web
Tuesday, July 12, 2011
Hotlinks to Portfolio Websites
A nice photography portfolio interface http://trevorclarkphoto.com/portfolio/action
Makes me go, "Hmmm.... " has potential, but something's missing http://www.ayushsaran.com/
Like, clean design, especially like icons on home page that lead to examples of work http://www.shannonmoeller.com/
Interesting layout, nice color scheme, like the flickr widget at top http://www.jeffsarmiento.com/portfolio/
Nice website examples http://www.simpleart.com.ua/en/portfolio/
Makes me go, "Hmmm.... " has potential, but something's missing http://www.ayushsaran.com/
Like, clean design, especially like icons on home page that lead to examples of work http://www.shannonmoeller.com/
Interesting layout, nice color scheme, like the flickr widget at top http://www.jeffsarmiento.com/portfolio/
Nice website examples http://www.simpleart.com.ua/en/portfolio/
Subscribe to:
Posts (Atom)