READING SUMMARY
Chapter 8 is a pretty short chapter and it really just covers the uselessness of arguments about usability. We've all heard the saying, different strokes for different folks, and this is the primary focus of this chapter. Unfortunately, when it comes to making decisions between a group of people emotions and personal likes/dislikes come to the table. It is almost impossible to just have a bias-free discussion about why or why not something works. One of the solutions the book offers is instead of having the mindset "do users like this..." aim for a more productive question, "does this thing with these objects work in a way that makes visiting this page a good experience for most people who might use this website..." It might seem like it's more work, but in reality opinions are like assholes. Excuse my french.
So what should you do instead of unproductively arguing endlessly? Two words: usability testing.
This bring us to chapter 9, Usability testing on 10 cents a day. Maybe you've seen the movie Kate and Leopold (don't worry if you haven't). In this movie, Meg Ryan plays a very successful market researcher. Her position focuses on testing viewing audiences and changing advertisements to please them. This is very similar to usability testing.
A focus group is not the same thing as a usability test, though. A focus group is usually a small group of people that react to different ideas and designs together. In a usability test only one person at a time is being tested, usually by an individual doing the testing, and they are usually physically working through a design. I know that sounds a bit confusing but I promise to clear that up a bit.
Usability testing does not have to be a big, expensive ordeal. In fact, the more simple and inexpensive you do it, the more times you can test! All you really need is a camera or some sort of software that records what is happening on the computer screen and what is being asked of the user. To set up a test, you should set up a computer at a desk. Bring the user in the room while the design is not visible. The lead will talk the user through the process, making sure it feels comfortable for the user. Comfort is VERY important here, mostly because you want the user to feel okay if they make a mistake or can't complete the task you've asked since this is the VERY reason why you are testing: to make your design better! After a short introduction of the project and background questions for the user, you may show the user the design. Before instructing the user to click around, you can ask questions like what do you think this design is for, is it obvious, what would you click on first, etc. This will get an initial feel if the user understands the point. The rest of the test can continue in a similar fashion, with you asking the user to complete a task, while observing how the user reacts with the design.
This sort of testing is not used to prove or disprove any part of a design, but rather to inform the designers of potential hiccups for users. Most people involved will have some sort of emotional tie to the project, and this really allows them to step back and see it through the eyes of their potential client. Testing is a HUGELY important part of a design process, and it should be done EARLY and OFTEN by really any users of the web, not necessarily only by your target audience.
These chapters were really eye opening for me. I have previously coded my own website, and have done my own version of testing without even knowing it. When I showed my site to an instructor, I watched as he clicked around to understand how my "simple" website worked. It was interesting to take notes on places he often clicked to navigate around the site, although they were not what I intended. I think this process really is as important as the book makes it out to be and should be done repeatedly.
ADDITIONAL RESOURCES
Usability 101
Usability Testing Demystified
5 Second Usability Testing
Introduction To Website Usability
Website Usability Tools
Usability Testing Myths
1.31.2013
1.30.2013
unit four reading
READING SUMMARY
Chapter 7 discusses the homepage even further in depth than we've gone previously. It begins by breaking down how a user feels when a homepage is landed upon. The four main questions they might be asking are: What is this, what do they have here, what can i do here, and why should I be here (instead of somewhere else). It is important for the designer to leave clues for the user to figure out the answers to these questions on the homepage. This can be achieved a number of ways including keeping the most important content above the fold, using a tagline, welcome blurb, and headings, as well as easy to understand navigation with a prominent logo.
Now let's break these ideas down a bit. Above the fold sounds strange for a website, since you can't fold your browser. Think about it in the sense of a newspaper. The most important story is on the fron page, in bold type, above where the paper gets folded. Other stories can also be shown, and we get the idea that they are important as well. Imagining the upper quarter of your webpage as above the fold can help you to place your most important content there. Obviously, one must be careful not to crowd it too much.
A tagline is the space near the site idea or logo and it usually is a phrase that helps the user understand what the site is about. For example, goodfuckingdesignadvice.com has a tagline that states, "serving the working class designer since 2010." While this is probably not the best example of a tagline, it is one nonetheless. A tagline should be short, think between 6 and 8 words and it should avoid being generic or cliche. This tagline feels a bit cliche, but the website title as well as address give a pretty good idea of what the site is.
Next we may or may not have a welcome blurb, depending on need. If you look at colourlovers.com you will find a nice welcome blurb, "Share your color ideas & inspiration. COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love." This blurb really helps the user understand what the website is about. It also uses a technic of bolding important keywords, so a natural reader (skimmer) will pick on them even if they don't read the rest of the blurb.
I feel like at this point I've hit pretty hard on navigation and site id, so if you REALLY need more information on that you can just buy the book!
ADDITIONAL RESOURCES
Create a Rock Solid Tagline
Your Tagline: The Most Important Ad You'll Make
Website Taglines
Above The Fold (a whole website dedicated to UX and living life on the upper edge... of the page)
Life Below 600px
Some More Cool Navigation
Chapter 7 discusses the homepage even further in depth than we've gone previously. It begins by breaking down how a user feels when a homepage is landed upon. The four main questions they might be asking are: What is this, what do they have here, what can i do here, and why should I be here (instead of somewhere else). It is important for the designer to leave clues for the user to figure out the answers to these questions on the homepage. This can be achieved a number of ways including keeping the most important content above the fold, using a tagline, welcome blurb, and headings, as well as easy to understand navigation with a prominent logo.
Now let's break these ideas down a bit. Above the fold sounds strange for a website, since you can't fold your browser. Think about it in the sense of a newspaper. The most important story is on the fron page, in bold type, above where the paper gets folded. Other stories can also be shown, and we get the idea that they are important as well. Imagining the upper quarter of your webpage as above the fold can help you to place your most important content there. Obviously, one must be careful not to crowd it too much.
A tagline is the space near the site idea or logo and it usually is a phrase that helps the user understand what the site is about. For example, goodfuckingdesignadvice.com has a tagline that states, "serving the working class designer since 2010." While this is probably not the best example of a tagline, it is one nonetheless. A tagline should be short, think between 6 and 8 words and it should avoid being generic or cliche. This tagline feels a bit cliche, but the website title as well as address give a pretty good idea of what the site is.
Next we may or may not have a welcome blurb, depending on need. If you look at colourlovers.com you will find a nice welcome blurb, "Share your color ideas & inspiration. COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love." This blurb really helps the user understand what the website is about. It also uses a technic of bolding important keywords, so a natural reader (skimmer) will pick on them even if they don't read the rest of the blurb.
I feel like at this point I've hit pretty hard on navigation and site id, so if you REALLY need more information on that you can just buy the book!
ADDITIONAL RESOURCES
Create a Rock Solid Tagline
Your Tagline: The Most Important Ad You'll Make
Website Taglines
Above The Fold (a whole website dedicated to UX and living life on the upper edge... of the page)
Life Below 600px
Some More Cool Navigation
1.29.2013
unit three reading
READING SUMMARY
Chapter six really gets down to the nitty gritty of web-usability with navigation. When you design a site you should visualize it as a physical space, like a department store. You need to take into consideration how a person might get around to things that they desire. Signage is used in a store, and it can be used in web design as well. Links and drop down menus in navigation act as the large hanging signs over an aisle to tell you what you might find there. For example, a grocery store might have a sign for Baking. When you look closer, there is usually a smaller set of signs underneath that say things like "flour" "sugar" "spices" to help the customer find exactly what they are looking for. If your website cannot lead a user around, it can frustrate the user and make them leave.
Lets talk about menus. At a clothing website you might find options for Men, Women, and Children. When you click on one of the categories, let's say women, you will likely see another menu that offers blouses, skirts, dresses, undergarments, etc. It is helpful to somehow highlight where the customer is at a given time. For example, if I clicked on women the text might turn from blue (original link color) to red.
The importance of keeping consistency with layout is huge. Main navigation and site logo should almost always be in the same location (the only exception might be for a variance on home page and check out forms). Search boxes help the user looking for something specifically find it easily. Page names and headers are important to keep users where they need or want to be. Finally, it is nice to have a you are here indicator of sorts that shows a trail of where you've been. For example Home > Women > Shoes > Brand.
ADDITIONAL RESOURCES
The Importance Of The Home Button
Navigation Design
Planning & Implementing Website Navigation
Inspirational Navigation
Effective Web Navigation
Chapter six really gets down to the nitty gritty of web-usability with navigation. When you design a site you should visualize it as a physical space, like a department store. You need to take into consideration how a person might get around to things that they desire. Signage is used in a store, and it can be used in web design as well. Links and drop down menus in navigation act as the large hanging signs over an aisle to tell you what you might find there. For example, a grocery store might have a sign for Baking. When you look closer, there is usually a smaller set of signs underneath that say things like "flour" "sugar" "spices" to help the customer find exactly what they are looking for. If your website cannot lead a user around, it can frustrate the user and make them leave.
Lets talk about menus. At a clothing website you might find options for Men, Women, and Children. When you click on one of the categories, let's say women, you will likely see another menu that offers blouses, skirts, dresses, undergarments, etc. It is helpful to somehow highlight where the customer is at a given time. For example, if I clicked on women the text might turn from blue (original link color) to red.
The importance of keeping consistency with layout is huge. Main navigation and site logo should almost always be in the same location (the only exception might be for a variance on home page and check out forms). Search boxes help the user looking for something specifically find it easily. Page names and headers are important to keep users where they need or want to be. Finally, it is nice to have a you are here indicator of sorts that shows a trail of where you've been. For example Home > Women > Shoes > Brand.
ADDITIONAL RESOURCES
The Importance Of The Home Button
Navigation Design
Planning & Implementing Website Navigation
Inspirational Navigation
Effective Web Navigation
1.23.2013
unit two reading
READING SUMMARY
These three chapters reiterate the importance of keeping your website simple, easy to navigate, and to the point.
Chapter three explains visual hierarchy and how a user reads. It is very silly to think that anyone is going to read everything that is written on your page. I know it's sad, but really we are all skimmers. Most people don't read anything fully, let alone have the time to do so. Visual hierarchy is important for designers to show users what they are supposed to pay attention to. For example, on my blog I use BOLD CAPS to show a headline that I think might help someone navigate to a section that they want to read. It also talks about clickability. If something looks like a button, it should probably work like a button, right? A button, as you've certainly seen before, looks something like this:
You wanna click it, don't you?
It's a good thing if you do! This is a prime lesson... If you have a link that is clickable, it is very important to make it look like it is! Flat text doesn't look like a link, so how should someone know it takes you somewhere? (My easter egg attempt is likely failed because blogger won't let me turn off the hyperlink color change and underlining, but when you are coding yourself this can happen)
Chapter four reminds you to keep it simple when it comes to user options. Let me explain. When you are going to place an order on Amazon, you are prompted to fill out various "blanks" with things like your name, phone number, etc. Remember that drop down box you've seen since the beginning of the internet that lets you choose a state? That box is considered a mindless click box. It's nothing wild, or crazy and the user is used to seeing it. Now, imagine going to Adobe's website to search for troubleshooting. Chances are in the preliminary steps there will be a question of which program you have. You think, I've got Photoshop! That's easy. And then the dropdown lists version numbers. You scratch your head... Did I update last year? Or was it the year before that? Hmmm. This is what is considered a pause and think option. The less option likes this you have, the likelihood of easier navigation and usability.
Chapter five talks about the importance omitting words. Don't give instructions. Don't blabber on about yourself. If something won't take long tell the user (ie: survey). Keep it short.
ADDITIONAL RESOURCES
Visual Hierarchy
How to Use Visual Hierarchy
Power Structure & Gestalt
How to Check Your Site for Hierarchy
Clickability
Clickability & Search-Engine Friendly Websites
Why is Clickability Vital to Web Design?
Ease of Navigation
10 Principals of Effective Web Design (if you click any other site, click on THIS ONE!)
Improve Your Site Navigation
Omit Words
Omit Unnecessary Words
Compelling Web Copy
Avoid Killer Copy
These three chapters reiterate the importance of keeping your website simple, easy to navigate, and to the point.
Chapter three explains visual hierarchy and how a user reads. It is very silly to think that anyone is going to read everything that is written on your page. I know it's sad, but really we are all skimmers. Most people don't read anything fully, let alone have the time to do so. Visual hierarchy is important for designers to show users what they are supposed to pay attention to. For example, on my blog I use BOLD CAPS to show a headline that I think might help someone navigate to a section that they want to read. It also talks about clickability. If something looks like a button, it should probably work like a button, right? A button, as you've certainly seen before, looks something like this:
You wanna click it, don't you?
It's a good thing if you do! This is a prime lesson... If you have a link that is clickable, it is very important to make it look like it is! Flat text doesn't look like a link, so how should someone know it takes you somewhere? (My easter egg attempt is likely failed because blogger won't let me turn off the hyperlink color change and underlining, but when you are coding yourself this can happen)
Chapter four reminds you to keep it simple when it comes to user options. Let me explain. When you are going to place an order on Amazon, you are prompted to fill out various "blanks" with things like your name, phone number, etc. Remember that drop down box you've seen since the beginning of the internet that lets you choose a state? That box is considered a mindless click box. It's nothing wild, or crazy and the user is used to seeing it. Now, imagine going to Adobe's website to search for troubleshooting. Chances are in the preliminary steps there will be a question of which program you have. You think, I've got Photoshop! That's easy. And then the dropdown lists version numbers. You scratch your head... Did I update last year? Or was it the year before that? Hmmm. This is what is considered a pause and think option. The less option likes this you have, the likelihood of easier navigation and usability.
Chapter five talks about the importance omitting words. Don't give instructions. Don't blabber on about yourself. If something won't take long tell the user (ie: survey). Keep it short.
ADDITIONAL RESOURCES
Visual Hierarchy
How to Use Visual Hierarchy
Power Structure & Gestalt
How to Check Your Site for Hierarchy
Clickability
Clickability & Search-Engine Friendly Websites
Why is Clickability Vital to Web Design?
Ease of Navigation
10 Principals of Effective Web Design (if you click any other site, click on THIS ONE!)
Improve Your Site Navigation
Omit Words
Omit Unnecessary Words
Compelling Web Copy
Avoid Killer Copy
1.16.2013
portfolio website: wireframe sketches
 |
| Both of these designs allude to a traditional feel for the 360grid, utilizing different size relationships with images but a stationary navigation. |
 |
| Idea number three shows an interesting way of not opening a new page when a project is clicked, instead a sidebar with project photos and information slides out- I believe this would utilize javascript. Idea number four shows an different way of selecting another project when in a current project page by offering project thumbnails on the side instead of typical type navigation. |
 |
| Idea number five will be a cropped image style homepage with rectangular shapes that are echoed in the project page as well. |
 |
| Idea six is a slideshow style page that shows |
.jpg)
1.15.2013
portfolio website: moodboard
Color Scheme: I am interested in working with mainly black, or dark grey, lighter grey, and a color pop like a turquoise or red/orange.
Texture: I would like to create something that is typography based, with a nice flow and exciting hierarchy, so I've shown examples of chalk-board look-a-like pieces. I want it to feel hand made.
Typography: I love use of different type styles together, such as a script with a sans serif. I have a few favorite google fonts that I would like to incorporate.
My biggest challenge if that while I love the hand-made feel of chalkboards and the intricate designs, I feel like my aesthetic is more cubed, solid color, and simple. I would like to combine the two but using bits of the home-made feel style with a more simple and clean layout.
1.14.2013
portfolio website: project statement
Create
a list of all users that may visit your site (not from the WWW but those you’d
invite).
- Creative Directors
- Art Directors
- PR Personnel
- Clients
- Students
- Teachers
- Friends
- Family
- Creative Directors and Art Directors:
Images of projects that are easily accessible and quick to navigate through. Easily found and downloadable or selectable resume and obvious contact information. Probably a safe bet that less is more- showcase your work, less clutter. - PR Personnel:
Resume that is easy to download or select. Obvious contact button. - Clients:
Beautiful work and easy navigation with a seriously easy to find call to action! Hire me or contact me button should probably be on every page. - Students:
Inspiration! Students are more interested in picking apart your coding, finding how things work and looking at your work to get ideas for their art. - Teachers:
Easy and quick navigation. Concept driven work with explanation of work. - Friends:
Work that looks "realistic" and makes sense conceptually. Fully functional page that is not hard to understand but that really showcases my work. - Family:
Any work posted by their awesome daughter/cousin/niece/relative that they can be impressed by. Must be VERY easy to understand with anything that has an image clickable (basically).
Describe
what you need to inform and persuade them of:
Promote
my: designs! I need things to show that are WORTH promoting.
Goals of the site are: showcase my work in a way that is easy to understand and navigate, without overwhelming the viewer but still keeping interest.
Goals of the site are: showcase my work in a way that is easy to understand and navigate, without overwhelming the viewer but still keeping interest.
My
ultimate message/philosophy (about who you are): "Design is so simple, that's why it is so complicated." -Paul Rand
I believe that the most promising and beautiful work is the most simple, and conceptual. A picture can say a thousand words, and I want to prove that to you with my designs.
I believe that the most promising and beautiful work is the most simple, and conceptual. A picture can say a thousand words, and I want to prove that to you with my designs.
What
is the story you are telling? Simple is beautiful.
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.
- Backdoor at Roxy's Identity System and Collateral
Logo
Letterhead, Business Card, Envelope
Direct Mailer
Menu
Signage - Bathtub Gin & CO Identity System and Collateral
Logo
Letterhead, Business Card, Envelope
Menu
Table Tent
Style Guide - Roq La Rue Gallery Illustration
Pen Illustration
Full color pencil illustration
Flyer - GQ Magazine We The Living Dead Article
Splash page
Pull quote
Spread 1
Spread 2 - TWIF Beard & Stache Fest
News paper ads
Billboard
Teeshirt - Nintendo Super Princess Daisy
Logo
Process Book
Game Cover
Splash cover design - Trader Joes Newsletter
Cover
Spread
Folded Newsletter
For
the purpose of structuring your website portfolio pages, list the categories of
work you will show. (for a Photographer, or example, it may be portrait,
product, sports photography categories).
Potential subcategories
- Print Work
- Web Work
- Photography and Retouching
- Hand-drawn work
Concept
Statement:
The main purpose of my website is to show my work to future employers and potential customers. My work should be the focus and star of the website, so I don't want it to get lost in a messy or cluttered homepage. I want the website to have very intuitive and easy to understand navigation, with the aid of thumbnails and directional arrows to drive users to change projects. In order to grab attention and keep attention on my page I will use variety and show my best projects as well as include large, high quality images. As a designer, and a person, I rely and use humor in my work and my life. It is important to me to reflect who I am to my audience but also to keep my humor aside from my professionalism.
In order to show the best possible me, and best possible projects, I want to hand pick the designs I showcase. My personal logo or name will be a stationary position on the website along with the navigation to create a feeling of consistency and ease. I will utilize arrows to toggle through projects as well as have click-able links so a user can always easily change what they are seeing. My main goal is create a website that people can browse without fuss or hassle that has an obvious call to action: hire me!
1.09.2013
unit one reading and inspiration: graphic design portfolio
READING SUMMARY
These first two chapters were about going back to basics. Just like most design classes have taught me, keep it simple! Successful web design is web design that can be navigated and understood easily from the users perspective. When things get overcomplicated on a website it becomes hard to navigate and frustrating. The second chapter really talks about how users are more-or-less, rapid clickers. Tunnel vision sets in when there is a goal in mind (and honestly, how often are we NOT looking for something) and people tend to just click whatever strikes their fancy first, even if there is a more straightforward way to find what they are looking for. We are habitual creatures that tend to do things the way that we know how, even if it's not the most efficient way.
While I felt like the things that were covered were relatively common sense, I think it is really very important to take into consideration our habit-forming nature. Personally, I have used Adobe Photoshop for years- probably since about 2004. I do things the way I taught myself to do them if I wasn't sure the correct way. I am currently learning hot keys and shortcuts and my mind is blown. I initially turn on autopilot and try to do things the old way, but the more I learn and utilize these shortcuts, the more time I devote to what I'm doing and the less time I have clicking around. I feel like web users are very similar. Once something works, they will do it that way until they train themselves otherwise. Our job as designers is to not only make things work beautifully, but quickly and comprehensibly, in a way that might aid our visitors to learn! That sounds like a big responsibility!
Why Mood Boards Matter was a very interesting article explaining the importance of mood boards. As a designer I am always looking at pictures of ANYTHING to get inspiration. A mood board is just a collection of inspirations that give the vibe of the direction you want to take your project in. They are a great source to refer back to when designing as well as a great option to show clients. In the design world we always want to SHOW and not TELL. A mood board really does just that. Now if only I could settle on one style...
INSPIRATION
These are some really beautiful graphic design portfolios and websites!
Cymetriq
Charlotte Tang (don't forget to check out the awesome color hover effect!)
Olly Gibs (love the type and the hover- also check out the about me page, love how it opens to the right)
Paul Currah (so, basically I am obsessed with hover effects)
Ben Barry
Kendra Schaefer (sassy and sarcastic. I can dig it)
Cast Iron
Moreten Claussen (you're welcome for the mind explosion)
M1 (it's not in English, but it is so fun!)
Ben Hulse
Ryan Scherf
Scribble Tone
These first two chapters were about going back to basics. Just like most design classes have taught me, keep it simple! Successful web design is web design that can be navigated and understood easily from the users perspective. When things get overcomplicated on a website it becomes hard to navigate and frustrating. The second chapter really talks about how users are more-or-less, rapid clickers. Tunnel vision sets in when there is a goal in mind (and honestly, how often are we NOT looking for something) and people tend to just click whatever strikes their fancy first, even if there is a more straightforward way to find what they are looking for. We are habitual creatures that tend to do things the way that we know how, even if it's not the most efficient way.
While I felt like the things that were covered were relatively common sense, I think it is really very important to take into consideration our habit-forming nature. Personally, I have used Adobe Photoshop for years- probably since about 2004. I do things the way I taught myself to do them if I wasn't sure the correct way. I am currently learning hot keys and shortcuts and my mind is blown. I initially turn on autopilot and try to do things the old way, but the more I learn and utilize these shortcuts, the more time I devote to what I'm doing and the less time I have clicking around. I feel like web users are very similar. Once something works, they will do it that way until they train themselves otherwise. Our job as designers is to not only make things work beautifully, but quickly and comprehensibly, in a way that might aid our visitors to learn! That sounds like a big responsibility!
Why Mood Boards Matter was a very interesting article explaining the importance of mood boards. As a designer I am always looking at pictures of ANYTHING to get inspiration. A mood board is just a collection of inspirations that give the vibe of the direction you want to take your project in. They are a great source to refer back to when designing as well as a great option to show clients. In the design world we always want to SHOW and not TELL. A mood board really does just that. Now if only I could settle on one style...
INSPIRATION
These are some really beautiful graphic design portfolios and websites!
Cymetriq
Charlotte Tang (don't forget to check out the awesome color hover effect!)
Olly Gibs (love the type and the hover- also check out the about me page, love how it opens to the right)
Paul Currah (so, basically I am obsessed with hover effects)
Ben Barry
Kendra Schaefer (sassy and sarcastic. I can dig it)
Cast Iron
Moreten Claussen (you're welcome for the mind explosion)
M1 (it's not in English, but it is so fun!)
Ben Hulse
Ryan Scherf
Scribble Tone
Subscribe to:
Posts (Atom)