Log 5a: Reading Analysis

Posted in Uncategorized on October 7, 2009 by kbrodinterface

Work Being Analyzed: Chapter 2 and 3 of Krug’s Don’t Make Me Think.

Upon reading this work, the internet user in me screamed out “Exactly!!!” This is what I do, this is what everyone else does, and it’s about time someone put it down on paper. The designer in me got a little paler and couldn’t help but ask “Why bother?” and “What do I do now?” The deisgner in me also got  a little iffed that all of my work would go unnoticed.

What do I mean by that? Well, this article began by breaking the news that while designers assume that a person will throroughly go through and analyze a wep page, the person really scans over it, searching for the information the wanted to find, clicking any link that seemed reasonable to obtaining their goal, and rushed through the whole thing rather than appreciating the designer’s handiwork.It the Facts of Life that are now being told to designers.

The first Fact of Life is “We don’t read; we scan”

The reasons they give for scanning are as follows:

1. The user is usually in a hurry. In my experience, this is a fact. I don’t go to expedia.com or the NJ Transit Website just to browse. And looking up the information here takes less time than making a phone call, booking a travel agent or rushing to the bus or train station.
2. The user doesn’t need to read everything. I can see this. Scanning alone leads the user to the relevant parts.
3. The user is good at it. We’ve had experience scanning the newspaper and books to the parts we wanted. I understand that. I’ve also definitely had practice. I don’t think I’ve ever read a newspaper cover to cover, so to speak. I don’t think I’ve met many people who have either. And having used to get the paper everyday, my skills have been honed to work the same magic on the Internet.

Another thing brought up were the two things people focus on; words that match what they are trying to accomplish and words like “sale” “free” and “sex,” trigger words that we always see. As far as we’re concerned any other words are just jibberish and are only in our way.

The second Fact of Life is the act of “Satisfice” (the combination of satisfy and sacrifice.)

Without reading eveything all the way through, the user may not always pick the best choice, instead, in their hurried state, they pick the first reasonable choice they come across. A lo of the time, they’re right. Other times, the aren’t. However, it is only a computer so if you end up in the wrong place, the back button is there for a reason. I’ve used it more than enough times in my lifetime.

The last fact of life given is that we don’t figure things out, we muddle through them. The example they used were people putting URLs in the Yahoo search bar. It isn’t it’s original use, but people figure that if it works and it gets them where they want to be, it’s right in some way. At my home in New Jersey we have Comcast’s Internet. When you open your web browser, it takes you to Comcast’s homepage. On the top is a search bar much like Yahoo’s, and my mother will type any web address or search into that bar no matter what. I try and tell her otherwise, but she will only do it her way. It’s a lot like Norman’s theory on affordances. The search bar affords more things based on my Mom’s experiences.

Knowing how the mind thinks takes us to Chapter 3, and how we as designers can make this happen.

Since users are going quickly through your site, the important things to keep in your design are:
1. Creating a visible hierarchy. This is just like Norman’s theory of visibility, The more important things have to be more prominent and easily. The user will get more frustrated if they have to slow down and search for the links they need to find.
2. Taking advantage of conventions. While designers cringe at being conventional, in web design, it’s one thing that works. You can still create a website that is aesthetically pleasing with the same basic ground rules. As Norman says, a good designer has to be able to balance both aesthetics and usability. If one dominates, the other suffers. I’m glad this philosophy is out there because if shows how much more difficult our job is. We don’t just “make things pretty.”
3. Break pages into defined areas. This was related to grouping. I know I’d be confused (and annoyed) if two related links were on the opposite side of the site. It automatically makes usability suffer because I would have to take twice as long to find both links, and that’s just a waste of time that I or nobody else wants to deal with.
4. Make it obvious what’s clickable. Essentially this is feedback. The standard for online links is having a blue underlined text. That and having the finger pop up over a link instead of the arrow can be great feedback. My favorite form is the rollover. It’s immediately obvious and you don’t have to search hard. Just a brief hover of the mouse, and you can find any link on the site.
5. Minimize noise. Clutter is terrible in any circumstance. In rooms, websites, just about anywhere. It’s confusing and no one wants to deal with it.

This article was brief, simple, and effective in teaching designers what their focus should be in web design. It also subtlely references Norman, who we’ve been learning about since day one. As a student, it keeps tying everything together, so I feel like I am retaining a lot more of the information.

Advertisements

Log 4b: Interface in Real Life

Posted in Uncategorized on September 30, 2009 by kbrodinterface

Link: http://www.nytimes.com/external/readwriteweb/2008/12/03/03readwriteweb-wikipedia_gets_grant_to_make_editing_easier.html

It is safe to say that anyone with Internet Access has paid a visit to the website Wikipedia. The company, The Wikimedia Foundation, has just recieved a grant of $89,000 with the objective of making ta new user interface to assist inexperience contributors to making a contribution to the website.

I took a screenshot of the editing screen for the featured article of the day (Texas A&M University).

Wikipedia

Upon first look, I agree with the sources in the article. This is not exactly intuitive. If someone had a vast knowledge on World War II and wanted to edit the article, there is reason to believe they wouldn’t have the same vast knowledge in coding. Some of the buttons are familiar: Bold and Italicize.  However, while I know the affordane of those buttons, how would they work within this jumbled coding? Wikimedia admits that their contributors are all at leats moderately proficient in coding, which excludes a good number of people who wouldn’t be able to contribute.

I think that this is a good idea. This page currently needs mapping and visibility. As I look at this with now coding experience, I have no idea where my first step would be. Any natural mapping are non-existent. I wouldn’t be making slips, I would be making calculated mistakes based on thought processes and guessed. The type would be showing up, but I wold get no real feedback to if I was doing this correctly or not. This interface was designed by someone who didn’t keep the user-central design in mind. In fact, they alienated a majority of potential contributors because they are not tech-savvy enough for this.I hope that the new interface designers that are coming in are better at opening the gates for more users.

Log 4a: Reading analysis.

Posted in Uncategorized on September 30, 2009 by kbrodinterface

Work being analyzed: the last three chapters of Norman’s DOET.

Upon reading the last three chapters, I got an idea of how the book was supposed to teach us. We were supposed to suffer through and learn all the trials and tribulations of technology these days and then use the knowledge of the frustrations of the everyday user to make our designs easier and more comprehensive. As designers, we need to be fully aware of the affordances and object has, comon mistakes people make, and how to make any object comprehensive and user-friendly.

Chapter 5 gave a detailed description of the errors people make all the time. Most of them fall under the categories of slips. Norman defines slips as an “automatic behavior problem” that occurs when someone intends to do one thing and does another. Norman categorizes these slips as follows:
– Capture Errors: When two actions with similar beginnings, one of them will overtake the other.
– Description Errors: When two objects are physically alike, you may use the intended action on the wrong object.
– Data-Driven Errors: recalling the wrong piece of data.
– Associate Activation Errors: Event activates a similar but wrong response.
– Loss of Activation Errors: Forgetting to do something, or part of something.
– Mode Errors: When objects have multiple modes and we do something in the wrong mode.

Reading these errors, made my laugh. Some of these exaples are funny and a lot of them are the same kind of mistakes I have previously made.. Everyone has. I never once associated these kind of everyday mistakes to design. But it is important to realize that mistakes will happen no matter what. It is our job as the designers to make sure that the errors are easily recognized and fixed, as well as making a lot of them preventable. I’ve deleted, saved over or messed up enough projects in my lifetime to know that it is a lot more convenient to have less of those happen. Just the other day, I was working on a project and saved it. I had to do another copy, so I left the same window up and figured I would hit the Save As button to make a duplicate Illustrator Document. As it turns out, I hit the Save button instead. Without it asking if I was sure I wanted to do this, I lost the first copy and had to do that once more. I just saw “save” and made a description error. Needless to say, I wasn’t pleased. Like a good friend, technology should make us aware and stop us if we are about to make a huge mistake. it is the designer’s responsibility to make technology into our reliable friend.

We can’t make mistakes disappear, but what we can do to quell the amount of errors are the following (as written by Norman):
1. Understand what causes errors so we can minimize them.
2. Make it possible to undo actions.
3. Make it easier to see when we made mistakes, as well as make them easy to fix.

With these ideas, we are making life easier for us. Feedback on our actions and errors need to be obvious. The red and green lines on Microsoft Word are incredibly helpful in determining whether I have made an error in spelling and grammar. As a graphic design student, I would absolutely die if “Command + Z” didn’t exist. It is the easiest way to undo an action that I have seen in a while. Just a minute ago, I used my Tide to Go stick. The feedback was the chocolate stain appearing on my shirt, and the Tide stick acted as my undo button. The stain is gone.

Mistakes happen all the time, and good design is a key part in making it all better again.

Chapter 6 continued to talk more about designing for the user. Designers in the world will always be in high demand in the workplace, it seems. Design is a long lasting process. With each object that is designed, mistakes are alays found and it is our job to constantly be editing these mistakes and making them as close to perfection as humanly possible.

This chapter also taught me a key thing about y furture career choice as a graphic designer. A designer can make something aesthetically pleasing. A really good designer knows how to balance aesthetics with usability. The two need to be balanced because if one dominates, then problems are to arise. Those glass doors that Norman’s friend couldn’t figure out how to open? Well, they were made with a priority for aesthetics. If the usuability factor were justa s high, he would have no problem opening those doors.

While this limits how super pretty somethingg can be made, it’s a necessary evil. Norman notes that sometimes designers focus their attention on the wrong part of an object while a vital part gets ignored. Sometimes they will keep adding more and more features until an object becomes impossible to use. Sometimes, they make it more complex because it looks cool.

These are the temptations that everybody faces. However, we have to learn not to fall into that trap beause then we won’t get anywhere.

Chapter 7 talked about discussed what Norman called user-centered design. User-centered design is the belief that items should be designed with the user’s needs and interests in mind, and therefore should be user-friendly.

He went over many of the temems previously discussed in the book. For example, Norman listed what design should do for the user:
1. It should be easy to see the affordances at a moment’s glance.
2. Everything should be visible: the conceptual model, the alternative actions, and the results.
3. Make it easy to evaluate the current state of the system.
4. Follow natural mappings between intentions and required actions.

It couldn’t be stressed enogh in this book how important visibility is. It needed to give the affordances, to allow the user to see visual mappings, to recieve feedback, so that we can see that we are using an object correctly.

Another big issue was simplification. While complex objects look cool, no one will know how to use them. Norman also listed principles for making difficult tasks easier.
1. Use both knowledge in your head and knowledge in the world.
2. simplify the structure of tasks.
3. make things visible.
4. get the mappings right.
5. exploit the power of constraints
6. design for error.

The final chapter has given us a summary, and a hope that Norman has given us the correct philosophy in maing us better designers. I think he has succeeded. I persoanlly look at things different for their affordances and their constraints. My glass can hold water. But it can only hold up to the brim before it spills over. My purse can only hold so much before the zipper breaks and the seams split. Everything is intended to be designed for the users benefit, and I see that a lot clearer now.

Source: Norman, Donald A. The Design of Everyday Things.

Log 3c: Show and Tell

Posted in Uncategorized on September 23, 2009 by kbrodinterface

Show and tell link: http://wheels.blogs.nytimes.com/2009/04/09/chrysler-concept-imagines-a-car-without-buttons/?scp=3&sq=Interface%20design&st=cse

Summary: Chrysler’s new concept car, the 200C, has no buttons on it’s interior. Every control is by use of a touch-screen. The dashboard and everything is inspired by the steps taken to make the iPhone.

480-chrysler-touchscreen

Chrysler-200C-EV-Concept-Display-lg

Log 3b: Interface in Real Life

Posted in Uncategorized on September 23, 2009 by kbrodinterface

To get ready for the day, one place everyone needs to go is the bathroom. Each thing in there has affordances and constraints.

First the doorknob. How do I get in?

First the doorknob. How do I get in?

First, the doorknob is a physical constraint. You can grab it and you can turn it. you can’t just push it or pull it. My internal memory also serves in how to use this doorknob to twist and push the door open.

In order to start getting ready, one needs to be able to see. Case in point, the light switch.

In order to start getting ready, one needs to be able to see. Case in point, the light switch.

This is a simple switch. It affords you light, but it an only move inteo directions. One will only turn the light on, one will only turn the light on. There is nothing additional in there to confuse us.

Brushing my teeth.

Brushing my teeth.

The physical constraint of my toothbrush makes me aware that I should hold it by the handle, not the bristles. While individual perception can allow for other affordances, I know from internal memory and external knowledge  that this is for brushing teeth. he visible hint is the size of the brush head.
All of this seems natural, but really it’s just effective interface design.

Log 3a: Reading Analysis

Posted in Uncategorized on September 23, 2009 by kbrodinterface

Work being analyzed: Chapter 3 and 4 of The Design of Everyday Things by Donald A. Norman.

Chapter 3:

Chapter 3 is about using what we already know in our heads with the knowledge presented to us in the environment to perform a task.

Norman calls this using precise behavior from imprecise knowledge (55). While from memory you might not know the order of all the keys on a keyboard or the exact detailing of a penny, you still know how to type and how to spend a penny because the external knowledge helps fill in the missing information. Memory doesn’t need to be prcise though, as people can remember enough to distinguigh what needs to be so (58). The more you retain, the less you need to learn from the external sources, the more skilled and efficient you become.

He also discusses the two kinds of knowledge people have to use in order to function.
One of them is declarative knowledge, or their knowledge “of.” This the the knowledge of facts and rules. This type is easy to write down and teach.
The other is procedural knowledge, or their knowledge “how.” This is the kind of knowledge that allows people to do things such as play an instrument. This is harder to write down and teach. It is easier to demonstrate and learn by practice. (Norman 57-58)

It is the designer’s job to provide clues to serve in the memory of how to use all of these things.  They make sure the the environment provides enough clues to make the job easy. These external constraints can reduce the number of options on an item, making the amount of things to remember significantly smaller (Norman 60).

Norman also discusses the two kinds of memory.
1. Short Term Memory (STM): memory of the present; it can be retrieved with no effort, but you can’t hold a lot of information; it is valuable in everyday tasks, but easily forgotten in you get distracted (66).
2. Long Term Memory (LTM): memory of the past; it takes time to put away and to recall. It is an interpretation of what happened, and there isn’t a limit on how much and be in your memory (67).

Your memory is your internal knowledge and it comes in three categories:
1. Memory for Arbitrary things
2. Memory for Meaningful Relationships
3. Memory through explanation.(Norman 67)

All of these serve in the way people approach things and how they go about using an item.

The external knowledge supplied from one’s environment has drawbacks, the biggest being the “out of sight, out of mind” scenario. The two ways to combat that are reminders and natural mappings. Whether one needs to be reminded by a calendar, another person calling, or just willing themselves to keep it in their head bring back the knowledge of what and how it must be done. Natural mappings take away any ambiguity and eliminates the need for a memory. (Norman 72-78). The latter can be helped through effective design. It can create a better partnership between internal and external memory to make and object as easy to use as possible.

Norman closes the chapter by saying that with each item to approach, it is common that one may lean on external knowledge more than internal memory to make something work and vice versa. With that, comes tradeoffs. You get the pros of one way but have to deal with the restraints of the other (Norman 79).

It is up to the user to analyze which route they should take, but good design allows the decision and the actions to appear seamless and the item easy to use.

CHAPTER FOUR

Chapter four deals with the user knowing what to do with each item they come across.

Actions can start out simple enough, but if one is using something that is more complicated, problems can arise when there is more than one possibility, for example, multiple buttons on a VCR. While approaching a new object, people initially try to seek instruction or use knowledge from previous objects with similarities to the current one. However, what needs to be used are affordances and constraints together to figure out what an object can do (Norman 81-82).

There are four different kinds of constraints:
1. Physical Constraints: You can tell what you can or can’t do just by looking at it. It is more effective if they are easier to see and interpret. That way, you know not to do something before any failed attempts are made (Norman 84).
2. Semantic Constraints: This is reliance on the situation to tell someone what to do. It is one’s previous knowledge of the situation and the world that tells the user what and what not to do (Norman 85).
3. Cultural Constraints: These are based on cultural concepts that are seen in daily life. They are represent by what Norman calls schemas, or rules and guidlines for interpretation and proper behaviors (85-86).
4. Logical Constraints: They are helped out by natural mappings. No physical or cultural principles are at work; it is the relationship between an object’s layout and their effects (Norman 86).

What a designer must do is use the above constraints and affordances in their design. These should make the design simpler and in turn, eliminate any encounters with errors. Should any arise, the design is a failure (Norman 87).

Besides affordances and constraints, a designer must also focus on:
1. Visibility: The relevants parts should be easily seen.
2. Feedback: each action should be given an effect, something to let the user know something has been done. It could be a light, a new display image, and sometimes, sound and be used for visibility and feedback.
(Norman 99-101).

If crucial parts are hidden, and nothing happens when an action is performed, the user will be left questioning if what they’ve done is right. As a designer, it it your job to answer questions and solves problems, no to create new ones. For each new capability that comes to fruition, new displays and new answers should be given to the user. Technology is confusing enough as it is, without a failed design making it worse.

Source: Norman, Donald A. The Design of Everyday Things. New York: Basic Books, 1988.

Log 2B: Interface In Real Life

Posted in Uncategorized on September 16, 2009 by kbrodinterface

As a college student, I sometime pack things I think I’m going to use and I never do.

For example, my tiny Black and Decker Iron.

There it is! My iron. Isn't it cute?

There it is! My iron. Isn't it cute?

Now, is there a reason I never use it? Or am I going to have to start immediately.

I look it over for a bit, then I’m confused.

Two knobs. Uh-oh.

Two knobs. Uh-oh.

I’m used to seeing one knob on an iron, always leaving it on cotton and hoping for the best. Two of them? I’m guessing the larger one is the one for choosing fabric.

It has numbers. Am I right about this being for fabric type?

It has numbers. Am I right about this being for fabric type?

This is the bottom of the iron, matching the numbers to the fabric. That's one knob solved.

This is the bottom of the iron, matching the numbers to the fabric. That's one knob solved.

The other knob.

The other knob.

This other knob looks like it would be for steam levels, since the cloud is depicted on it. However, the other dial had the same steam symbols. So do they both control the steam levels? What if I only set one button and not the other? How much steam would be used? Does the steam come from two different places or are they controlled together? I would hate to use this and ruin any of my clothes. And I would probably never use it again for I wouldn’t want to ruin anything. I would blame myself and the item, but knowing what I do know, the design is not as clear as it should be to make this work.  The visibility is there, but it’s confusing. One of the symbols needed to be different or on neither of the knobs.