Usability 101

Text: Don’t Make Me Think: A Common Sense Approach to Web Usability. (Introduction chapter)

Another lesson on usability! This is becoming my favorite subject.

This book argues that usability is partly just common sense, which I agree with. The point of usability is to make it so that the user doesn’t have to think about what they’re doing. Why should they have to think? A web experience should be (as the author put it) as easy as walking down an aisle at the supermarket, meaning that it shouldn’t be hard to find the information one needs.

Specifically, usability should address attributes like:

checkmarkUsefulness

Easy to learn

checkmarkEasy to remember

Effectiveness

checkmarkDesirability

& Enjoyability

Personally, I never considered aspects like

Website designers realize that internet users scan, not read, webpages. Usability experts realize that people expect to find all of the answers when going to a website. They shouldn’t have to look at a button and wonder “hmm… where will this take me?”

Check out this example

poor-ia

All of those little blurbs? They’re usability issues. They can be anything from the lack of an easy-to-find email address, to unattractive body text, to confusing words like “accommodations” instead of rooms (the more interesting word isn’t always the better one.”

 

 

 

 

 

 

63Here’s another bad example. There’s just too much going on on the page for someone to figure out which information is important and which information isn’t.

 

 

 

 

Visual elements that help with usability:

checkmarkbuttons that are obviously clickable

effective visual hierarchies

checkmarkeliminate distractions

format content to support scanning

A big way to make sure that a site’s usability is efficient is by having users test it out. How else would you get honest feedback? Usability experts let users try their hand at the software, as well as try it themselves in an effort to quickly find out the source of any problems. One of the most important pages on any website is the homepage. The homepage should easily guide the user to any point within the site, and it should also be very easy to get back to.

So designing a website is much more complicated than it use to be! It’s not just about having a website, its about having an efficient website that people enjoy using.

Take care!

Discussion Questions

1. Is it more important to have a user friendly website when you have other websites as competition, or when customers HAVE to go to your site (like with a specific bank)?

2. Whats the most annoying usability flaw?

Words aren’t Necessary to Convey your Message

Text: Letting Go of the Words: Writing Content that Works by Janice (Ginny) Redish

Number one rule of writing successfully for the web?

Audience > Content

(isn’t it funny how thats also the number one rule of usability? it seems that the audience is the key factor in any successful web venture.)

Knowing the needs of your audience takes research. You should gather information, list major characteristics, etc. And while this seems simple enough, it takes a lot of research and the ability to look at something from someone else’s point of view (aka the ability to relate).

Another factor to remember is that everyone who uses your website isn’t going to be at the same experience level.

Lets say you’re going to walmart.com. If you always visit the site, I’m pretty sure you could find what you’re looking for instantly. If you visit occasionally, you may know where to start. But if you’ve never been to the site, it’s probably a bit complicated. Don’t make that complication worse with unnecessary nonsense.

The same concept goes for the fact that different demographics of people will be on your site. You have to be able to empathize with thousands you don’t know. Tricky, right?

Scenario writing also helps. What might an 80-year-old woman be doing on your site? And how might she get caught up? Another valuable asset would be asking other people to use your website. Make sure that these people are diverse though; it doesn’t do much good if you ask ten white females for help, even if they’re ages vary.

635

Just as people have personalities, websites do as well. If your target audience is wide, make your website appealing to many different types of people. If your website is for one specific demographic, make it more appealing to them.

As you can see, websites are very unique to the people who visit them. Make your site an experience to those who venture there! They should say “you know, I feel like this site was made with me in mind.”

Discussion Questions

1.Is there a certain demographic that you think should always be included when designing a website? Why or why not?

2. What are some websites that you feel were “designed with you in mind?”

User Experience & the Next Technological Platform

Reading: The Elements of User Experience by Jesse James Garrett, Chapters 1-2

You know how many of the iPhone’s features were so new, yet so practical? The technology was effortless to learn because it took everyday things from our lives, like flipping pages in a book, opening a lock, typing on a typewriter, and putting them behind a touch screen. Steve Jobs designed the software based on human needs and wants first, and he found a way to make the technology fit in from there. That’s the genius behind the idea: he designed something that we the customer would gravitate towards because this new technology was surprising easy to navigate. The future of technology is user-centered design: take the user into account every step of the way. Before designers worry about the gadgets within a product, they’ll now research how the customer will interact with the product. That’s where the money is. A key point to remember is that user experience stretches beyond just “gadgets”, everything from web pages to coffee makers to light bulbs have user experience. And the customer is always right.

Here are the 5 planes of user-centered design for the web. 

SurfaceImage

What you see! You have to pull your audience in based on your ability to create something visually appealing.

 

SkeletonImage

This deals with the placement of buttons, text, margins, etc. Its the arrangement of the website,  and it should be arranged for maximum effect and efficiency.

 

StructureImage

This is a more complex skeleton. Where the skeleton decides where the navigation plane will be, the structure dives deeper than that, marking out exactly where each tab could take you

 

ScopeImage

Who is this site for, and how will you effectively reach that audience?

 

ImageStrategy

What do you as the designer want to gain from this site? An internship? A job? Publicity?

Making sure all of these layers coincide is a task, but it will make your website even more effective.

Image

 

 

This diagram shows how the layers coincide from most to least concrete. When designers make sure that all of the elements in the bottom layers (the ones below the surface) are set in stone and function correctly, the design process becomes much simpler because there isn’t a need to go back and redesign anything.

 

 

 

Discussion Questions

1. What do you think about user-centered design?

2. Which one of the planes of user-centered design for web are you most interested in and why?

My Newest Project :)

Our class’s next project deals with taking the slideshow I did a few weeks ago and expanding the idea into a 5 minute video. I’ve done video projects before for different classes and organizations, so I’m banking on that experience to help me with this one.

I’m going to take the diversity idea and try to expand it to a more current depiction. I’ll definitely talk a bit about the history of diversity at Furman, but I want this project to focus more on the student body, faculty members, and diverse programs. I sketched out a story board…… its quite rough.

storyboard 1 storyboard 2Basically, I don’t know exactly what I’m looking for. The only things that I’m sure of are that I’m going to interview different faculty members who are knowledgeable about the history of diversity at Furman, as well as our current standing with diversity. I’m also going to interview the heads of different multicultural organizations and see how active they are on campus.

That’s where I draw a blank. I guess I’m going to gather footage and see where it takes me.

Editing Explained

Reading: Visual Storytelling by Osgood and Hinshaw, chapter 8: The Aesthetics of Editing

While my last blog explained the different techniques used when shooting film, this reading describes the different techniques used when editing.

“While the technical craft of editing is fairly easy to master, the ability to use editing tools to bring the story to life can be a much greater challenge . . . Aesthetic skills and techniques are far more difficult to master.”

The best way to master editing is to realize that every single frame is critical to the quality of the movie as a whole. You never know how great you can make the next shot until you analyze the previous shot and figure out just how many ways you can play with the angle. Here are a few simple, common elements that make a huge difference.

sound that goes along with an image

the order that you decide to put your shots in (so basically, the way you decide to tell your story and how it enhances your project)

rhythm & pacing refers to the “beat” that the shots have. In other words, how fast do you cut from one shot to another, and how does that speed enhance your project? Remember that the faster the speed, the more precise your cuts have to be.

Here are some more complex elements

shot relationship refers to the way that two subsequent shots affect the audience’s perception of meaning. In other words, can you make your idea clear based on two shots that don’t necessarily go together?

time must be manipulated in any film. There are different ways to do this, like looking at the same clock throughout the project, showing the progression of the sun throughout the day, or showing people grow up from the beginning to end of the project.

a montage is a group of unrelated shots grouped in a way that conveys a new meaning. For example, I could have quick shots of different people gradually walking from one end of a walkway to another to convey elapsed time or even a journey from beginning to end. Montages are very effective in creating lasting impressions because of their creative elements.

continuity is pretty self explanatory. There can be altered to convey meaning, such as:

scissorsphysical continuity- seeing the same elements throughout a project (someone wearing the same clothes, the same house, anything really)

technical continuity- using the same type of filters, sound level, effects, etc.

cut on action-two shots that seem to flow in a realistic fashion instead of cut

a jump cut refers to two shots that lack continuity, which if done well could be used to show a creative change in the story.

Keep these elements in mind. They’re great starting points for someone interested in editing a memorable beginner’s project. 

 

Discussion Questions:

1. Think of a way that you could use a montage to convey meaning.

2. Which of these elements do you think is most effective in conveying meaning, and why? Which is least effective?

 

The 6 Elements of Effective Television Design

Reading: Sight, Sound and Motion: Applied Media by Herbert Zetti, Chapter 7: “The Two-Dimensional Field: Forces Within the Screen”

Woo Hoo!! One of our most practical reads to date… well, at least for me it was. With an interest in some type of spatial design, this chapter was right up my alley.

Zetti explains that there are 6 elements that must be considered for effective on-screen images.

checkmarkMain Directions

 

checkmarkMagnetism of the Frame & Attraction of Mass

 

checkmarkAsymmetry of the Frame

 

checkmarkFigure & Ground

 

checkmarkPsychological Closure

 

checkmarkVectors

 

In this post, I’ll try to explain each one & give easy-to-understand examples to show you their effectiveness when used correctly. Just a warning: some of the concepts seem kind of meticulous. Another warning: there are always exceptions to a rule.

Main Directions

There are 2 main directions: horizontal & vertical. On screen, you have the ability to emphasize either direction to increase the visual experience. Zetti argues that because we sleep horizontally, a horizontal direction suggests calmness, tranquility, and rest. A vertical direction, on the other hand, suggests dynamics, power, and excitement. Because we’re so used to seeing things as we would everyday (meaning without skewed angles and such), tilting horizontal & vertical planes can create a whole new and exciting atmosphere on screen.

Magnetism

wheels-bmw5series-blog480 (1)The magnetism of the frame refers to the fact that the 4 edges of the screen have the ability to attract objects near them, which can distort our perception of an image. For example, if a face is directly center screen, the face tends to look much rounder and more awkward tha
n usual. Check out the BMW example. See how it looks as if the side edges of the frame are almost pulling the car towards it?

 

 

Asymmetry of the Frame

When you’re feeling creative and want to take a cool asymmetrical shot, remember that people tend to pay more attention to the right side of the screen than the left, and that you can easily use angles to distort the vertical and horizontal planes (creating a cooler shot).

Figure & Ground

Here’s a great example. Back to the Benz. You see how the car is the figure, and the background is, well, the background. If we zoom in, do you see how the Benz symbol becomes the figure and the car becomes the background?

Psychological Closure

This refers to the ability of the human brain to mentally fill in gaps of visual information that isn’t present. Basically, we make connections based on clues.

For example, this panda bear isn’t completely outlined, but if I hadn’t mentioned that you may not have noticed.

closure_a

 

proximity

 

 

Do you see how the first set of dots looks like one rectangle, while the second set of blocks looks like two columns of rectangles? That’s because based on the proximity of the shapes to one another, our brain perceives the patterns differently.

 

 

Vector

This was the most confusing part of the reading…hopefully I’ll be able to explain it to you once Professor Price explains it to me! If you’re interested in the mean time, here’s an article that might help.

 

Discussion Questions

1. Which elements do you feel are the most import when considering how to make an effective image?

2. Can you think of any examples where these elements would hinder, not help, prove the point?