Usability in Web Design

Our reading for today included a few chapters from Steve Krug’s Don’t Make Me Think. Krug is a usability consultant, which is relevant to our current project: designing a website. He wrote this book for people (like me) who can’t afford to hire a usability expert. But he even says that most of it is common sense.

Simply put, usability means that the average (or below average) person can figure out how to use the product to accomplish some task.

Usability:

  • useful
  • learnable
  • memorable
  • effective
  • efficient
  • desirable
  • delightful

Don’t Make Me Think!

Everything on your website has to be self-evident. You want users to look at the page and be able to identify each component without a problem. You don’t want them to be confused about where he can find what he is looking for.

Some tasks will require some thought, but you want the user to think as little as possible to accomplish his goal. In this case, you want the site to be self-explanatory, with as little explanation needed as possible.

Things That Make Us Think

Cute names or unfamiliar names make us think. Krug states that there is a continuum from obvious to obscure, and we want to be the farthest towards obvious. Also, any buttons need to be obviously clickable. When people struggle with using a company’s website, they question the company’s commitment to its customers.

Questions they shouldn’t ask:

  • Where am I?
  • Where should I start?
  • Where is the ___?
  • What are the most important things on the page?
  • Why did they call it that?
  • Is that an ad or part of the site? (my personal pet peeve)

This is important because if a user is frustrated by your site, he will go elsewhere to accomplish his task.

How We Really Use the Web

The user and the producer think of the site in very different ways. As I’ve talked about in previous posts, we like to scan. This means that users are glancing just to see if anything is interesting or clickable.

1.)  We don’t read pages. We scan them.

  • We’re usually on a mission.
  • We know we don’t need to read everything.
  • We’re good at it.

2.) We don’t make optimal choices. We satisfice.

We don’t choose the best option, but instead the first reasonable choice.

  • We’re usually in a hurry.
  • There’s only a small penalty for guessing wrong.
  • Weighing our options may not increase our chances.
  • Guessing is more fun.

3.) We don’t figure out how things work. We muddle through.

  • It’s not important to us.
  • If we find something that works, we stick to it.

Billboard Design 101

1.) Conventions are your friend

 

 

Writing For The Web

Our reading for today’s class was chapters 2 and 3 from Janice Redish’s Letting Go Of Words: Writing Web Content That Works. I’ve been writing this blog for almost an entire semester now, so let’s see if I’ve been doing a good job or not.

Our Audience

You need to understand your audience before we start to write.  This is how you decide the subject, the length, the vocabulary, and the structure of your content.

7 Steps to Understanding Your Audience:

  1. List major audiences
  2. Gather information about them
  3. List characteristics for each audience
  4. Gather their questions, tasks, stories
  5. Use information to create personas
  6. Include persona’s goals and tasks
  7. Use this info to create scenarios for your site

1. List Your Audiences

2. Gather Info

3. Define Audiences

4. Questions, Tasks, and Stories

5. Personas

6. Persona’s Goals and Tasks

7. Create Scenarios

 

Home Pages

Key Terms:

  • destination page – provides information (what people are looking for)
  • pathway page – leads people to what they’re looking for (menu, gallery, etc.)

A successful website allows people to:

  • find what they’re looking for
  • understand what they find
  • act on what they find

Major Functions of Home Page:

  1. identify the site and establish the brand
  2. set the tone and personality of the site
  3. help people get a sense of what the site is about
  4. let people start key tasks immediately
  5. send each person his way (both correctly and quickly)

1. Identification and Branding

2. Tone and Personality

3. A Sense of the Site

4. Don’t Distract Users

5. Efficiency

 

 

 

Designing My Own Website

We’re making our own websites for our final project in class, and as we learned about in the last reading, we have to define the strategy and the scope.

The Strategy

I really want my website to be geared towards potential employers for summer internships and then a final job after graduation. This is my first communications class outside of public speaking and I have yet to have an internship in the field. So this class is my first example of work that I can show to demonstrate what I  have done in the past and what I will hopefully be able to accomplish for that employer.

I want it to be professional but also show my personality and creativity. It will be clean and polished but I also want it to show my individuality. I think this will be reflected in the work I display, but I want to make sure the website itself does it as well.

Since we are doing this for our digital communications class an professor, I also have to make it interesting for them. If I need to (which I doubt I will) I can tweak it after the class is over for further professional use.

The Scope

I want my site to be set up in different pages, like how I wish my blog was (still have yet to figure that out). I also want to include a resume, but I really need to revamp my current resume. I made it when I was applying to colleges, and it’s way too cluttered and outdated. I think we’re also going to work on this in class.

I want to display all of my work from this class, because it is my only example of what I’ve done as of now. I’m going to feature the bigger projects, like the video, at the top and the biggest, because I consider it my biggest achievement.

I also want to feature an about me page. I like what I did with mine on the blog, but for the website I think it needs to be less personal and more professional.

 

Web Design: The User Experience

Our next reading, now that we’re done with the video project is from Jesse James Garrett’s The Elements of User Experience. We’re looking at this because our next assignment is designing a website.

Since we are constantly buying and using products and services, user experience is a part of our daily lives, whether we know it or not. There is one person, usually more, behind every service or product. Garrett defines user experience as the experience the product creates for people in the real world, whether it is positive or negative.

Chapter 1

Why It Matters

Everyday, we interact with products without realizing how big of a role use experience plays in our lives. But user experience doesn’t start when we are using the product. It is developed by people in order to make the product as easy to use as possible. User experience is found in the details – it’s the small things that make the difference. Positive user experience usually adds something intuitive. Negative user experience goes against human nature and is complex.

User Experience Design

Product design is more than how it looks and how it functions. It delves into the psychology of the users themselves.  I actually learned about this in my General Psych class during my first semester at Furman. A good product is designed to align with the way we think.

An example we talked about in class is a stove. The placement knobs you have to turn seems simple enough, but what if they were in the wrong order? Wouldn’t that make it much more complicated to use? Someone had to think of that when designing the product.

stove

What if the knob that is all the way to left turned on the front right burner? It would always be a guessing game.

Another example, which he mentions in the book, is the dials in the car radio that change the volume and the station. In my car, they’re flipped, so whenever someone in the passenger seat goes to crank it up, they inadvertently change the station. I have a Mazda 3, so maybe it’s more common in Japanese products to have the dials switched. But it definitely went against human intuition.  This makes it harder to use and decreases customer satisfaction.

radioWhich one should change the volume and which should adjust the station? Human nature says the biggest one in the middle should be for volume, since it’s used much more often than the station dial.

Web User Experience

User experience is more important for websites than for any other products. Unlike with a tangible product, if a website is too complex to use, the user blames himself instead of the website. He feels stupid, making him much less likely to use it again.

Web user experience is often neglected, as sites focus on adding as many features as possible. But, it is user experience that sets these sites from their competitors. No matter if a product is on the web or in your hands, whether your experience is positive or negative determines if you will come back.

Good Business

Key Terms

  • return of investment (ROI) – for every unit of something you spend, how much you get in return
  • conversion rate – measures how effective the user experience on your site is

The main goal of a website is to communicate information, or content, to its viewers. It has to be easy to understand. It could be the best functioning website on the Internet, but without good user experience, people won’t come back to use your site again.

Conversion rate is seen most with sites that sell something, meaning that the company’s ROI is monetary.

How User Experience Improves Efficiency:

  1. helping people work faster
  2. helping people make fewer mistakes

This also pertains to websites within the company. Over the summer I worked at a company where the websites I had to use to finish my tasks were way too confusing.  It made me frustrated, and when I talked to others, they felt the same way. Web user experience would not only increase productivity but also job satisfaction.

Your Users

Key Terms:

  • user-centered design – practice of creating engaging and efficient user experiences

In order to create a user-centered design, you must consider the user’s needs every step of the way. I’ll go into this more in the next chapter…

Chapter 2

The Five Planes

Screen Shot 2014-04-17 at 10.11.15 AM

All of these planes combine to give you the neat package that is the website. They range from concrete to abstract, with strategy being the most abstract.

  1. The Surface Plane – this is the superficial level where text and images combine to create what you see
  2. The Skeleton Plane – the placement of buttons, controls, photos, and text
  3. The Structure Plane – the abstract layout of the skeleton
  4. The Scope Plane – the features and functions that constitute the site and how they fit together
  5. The Strategy Plane – what the creators and the users want out of the site

All of these planes depend on the surrounding planes, so if they don’t align the final product will show the lack of cohesiveness. You need to start with a sound strategy and build from there. The decisions you make in a plane limit the choices you have for the next one.

However, this doesn’t mean that you must finish each plane before moving on to the next. The decision making processes actually overlap between the different planes. You want to be able to go back and change things as you go.

Function vs. Information

Screen Shot 2014-04-22 at 10.48.00 AM

Strategy:

  • user needs – what the users want out of the site

vs.

  • product objectives – what the creator wants out of the site

 

Screen Shot 2014-04-22 at 10.48.12 AMScope:

  • functional specifications – detailed description of features of product

vs.

  • content requirements – description of content elements

 

Screen Shot 2014-04-22 at 10.48.21 AMStructure:

  • interaction design – define how the system behaves in response to user

vs.

  • information architecture – arrangement of content elements to facilitate human understanding

 

Screen Shot 2014-04-22 at 10.48.29 AM

Skeleton: Information Design - present info in a way to facilitate understanding

  • interface design – arrange interface elements to allow user to interact with site’s functionality

vs.

  • navigation design – set of screen elements that allow the users to move through information architecture

*This is where you make mock-ups of what you think the final product will look like.

Screen Shot 2014-04-22 at 10.48.36 AM

 

 

Surface: Sensory Design 

 

 

 

 

 

Video Storyboard

 

 

Our next project is a video on the same topic of our powerpoint. For those that don’t remember, mine was the negative effects of the media on female body image. This is the first draft, and I have never done a video project before, so there will definitely be revisions.

Final Storyboard

 

  1. Start with a girl without makeup looking at the camera – title and credits rolling during
  2. Same girl putting on lipstick
  3. Same girl putting on mascara
  4. Same girl putting on blush
  5. The girl after all makeup was applied – take a snapshot and show how photoshop changes the picture
  6. Girls watching TV in an apartment
  7. The unrealistic standards they’re looking at
  8. They talk about how they wish they looked like the girls on the screen
  9. Montage of unrealistic magazine covers
  10. Continue montage
  11. Interview with young woman
  12. Another interview with young woman
  13. Girl reading a magazine in her room – show her reading from lots of different angles
  14. Tying shoes
  15. Close-up of legs running fast
  16. Zoom out girl working out in the PAC
  17. Interview with professor who runs the Body Image Project here at Furman (can’t think of his name at the moment)
  18. Girl on her computer watching movies – then look in the mirror at self
  19. Zoom in on the sticker
  20. Zoom out to a girl looking at herself critically
  21. More interviews
  22. More interviews
  23. Someone steps on the scale and goes up
  24. Girls holding up signs about their insecurities – not enough

I don’t know how to end it yet, but I definitely want to finish on a more positive note.  I might ask girls what the like about themselves and do that but it strays from the focus on media.