Archive for October, 2009

PROJECT 1

Posted in Uncategorized on October 14, 2009 by kbrodinterface

Option 2: Redesign a Website.

Redesign a home page and sub pages for a web site of your choosing.

Specific requirements:

o    Choose a web site that you believe needs a re-design (poor design) and…
o    Choose a second web site from another competing (if possible) company or organization (i.e. Netflix vs. Blockbuster; Myspace vs. Facebook, etc.) that has at least one interface feature worth emulating in your redesign (ie, and good design).
o    Redesign a home page and one other page of the poorly designed site and incorporate the interface feature of the good one in your redesign, using the interface principles from the excerpts from Don’t Make Me Think by Steve Krug and DOET.
o    Note: You don’t have to build the redesign in HTML. Consider taking screenshots and manipulating them in Photoshop
o    The presentation materials should contain annotated screenshots of:
•    Poor design
•    Good design
•    Your design

POOR DESIGN: The website for Manasquan High School

Bad1

Bad2

Why this is bad: It is full of technical and coding error. Norman values visibility over everything. With the white links being moved to the white background, no one can see what those links are. The hierarchy is off. After noticing the top image and the photo, the next thing I see is the blue bar going down the side of the web page. However, while that my be the case, there is no use for that. It’s just a space of color. Grouping is bad. You see the header for “Events,” but the events are all the way to the right of the page. The Principal’s Message header has no accompanying text, and you can’t see the header for Announcements easily at all. Considering the meaning of the word announcement, they should be higher on the visual hierarchy so people can actually see them. However, that is just another way Norman’s idea of visibility is just torn out of the window. You can’t see the white links to even see if they are clickable. This makes the viewer of this site take a longer time to navigate through the site. It isn’t the instant “billboard reading” that Krug argues should be the case in viewing a website. In that aspects and the others mentioned above, this home page is a failure.

Bad3

MHS' Subpage

This is just going to plain-out bother the viewer. Their eyes have been adjusted to one decorative style and then, a completely different font and stock photo was thrown in. This also needed adjustment.

GOOD DESIGN: The Website for Red Bank Regional High School.

Good1

Red Bank Regional's Home Page

Good2

RBR's Subpage.

Why this is good: Everything is visible, and there is a clear hierarchy. They have the articles and links that they want seen in the most prominent parts. The links appear clickable and they are grouped together in the red panel. There appear to be no technical errors. It is grouped wonderfully throught the page and is easy to read. Someone searching through could easily find the News, the Calendar, and any links they might need. This website is catered to fast navigation. The subpage is still cohesive with the theme of the home page and is easy to read. Overall, this is musch better than Manasquan’s website.

WHAT I DID:

Mine1

Mine2

What I did to this site was make it a lot easier to read. I made use of the prominent blue panel to house the links that peole could find easier, I also supplied a rollover so one would know they are clickable. I made the event links and the Announcement links look like traditional links that people recognize as clickable links. I also made the top toolbar clickable by making each section appear as a button or a tap instead of just trying to hover over the word. Everything is grouped together and easy to see. Everything belongs where it should be and the user’s eye clearly travels. The subpage is now coherent with the home page, having the same design and rollovers as the home page. Manasquan High School would benefit from using some of my improvements on their own website.

Advertisements

Log 5b: Interface in Real Life

Posted in Uncategorized on October 7, 2009 by kbrodinterface

I’m a graphic design major. As terrible as it sounds, I am terrible with technology. The more things that are spoon-fed to me, the better things are. However, as my friends mock me for killing machines and breaking the Internet, there are some things that happen that should definitely be fixed in some way.

For some reason, on the UArts network, the instant messaging program, iChat, is kind of faulty. That’s okay with me though, I downloaded and use Adium.

Adium's Logo. It's cute. I still haven't figured out why the logo is a duck, though.

Adium's Logo. It's cute. I still haven't figured out why the logo is a duck, though.

The logo at the bottom of my toolbar will usually be helpful. It has different signals and alarms for when it’s loading, when I’m away, when I get a an Instant Message (including who I get it from and how many I’ve gotten). When I am signed off, the duck’s eyes are closed. However, there will be the occasional dip in service or something else, and I will get booted from the program (it signs me off). However, nothing changes. My buddy list doesn’t disappear, the logo stays unchanged, I can still technically send messages (granted, they don’t recieve them, but it looks like they do). The only sure-fire way I know I’ve been booted is when my friends text me telling me that I’m offline. The program gives me no feedback and therefore can be a faulty interface, since it isn’t fully designed to combat error. The program is just fine the rest of the time, but I would just change the program to let there be some kind of feedback. Otherwise this program would be perfect.

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.