design courses, syllabi, schedules, resources and policies
By studying the type of people are using your site it is much easier to predict their behaviors. In the case of a banking website ethnography is important because almost everyone uses a bank and many use the banks website to do different tasks. Using a persona and a made up story about that person may help lead to a problem in the site that you would have never thought even was a problem. Knowing that a 65 year old woman who has never used online banking will need more explanation than a 25 year old who is trying to save for retirement. designing for the state of mind that the user is in when using a site is just as important as the features on the site.
A design can not truly be finished in my opinion, there is always a problem that will arise, even if it doesn’t appear for years after the design is in effect. The reading talks about it being finished not when you meet your own goals, or when you like at all, instead the author considers the user the final call in a products completion. Does it work, is there more to do, am I satisfied. These are some of the questions the user will ask themselves, and after those questions they will decide the completion of the project.
I only buy levi’s pants. This sounds crazy considering they are just one of dozens of clothing companies available to me, but there’s a lot going into me wearing their pants. They are cheap in comparison to some brands but definitely expensive in my mind, so really I could just buy lee’s or arizona jeans, but I only buy levi’s. Branding is a very important factor in my buying, and I am somewhat aware of this, but I go along with it anyway. The commercials for the product are typically young people living life free of problems, throwing on a pair of jeans and going out on the town. Then the name and badges on the jeans are pure Americana, and pushes the authenticity of the pants. That’s the whole idea, the authenticity of your clothes, your actions, and your life. Plus they are comfortable and have a great minimalist logo.
Last week in class we watched the film Objectified in which designers discussed the industry of product design. The film was very interesting with a diverse cast of interviewees all across the world, it also did a good job of covering many different topics relating to the industry.
As far as my opinion on the topic is concerned, I am by no means an expert in how to design a product for use in the real world, having made very little in the way of consumer products. Even so I could still understand where some of the designers were coming from. Some of my favorite discussion came from the idea that everything that we use and take for granted each day was designed, and probably had a story to it. Some of the designers agree that if a design goes unnoticed it is doing it’s job, but I think if anything that’s just too broad a statement. In my own life I try to make decisions on things on a case by case basis, and I think this should go for design as well. Not everything should just fade into our lives and be taken for granted, something can preform well and still make the user think, “this product is astounding.” at least every once in a while. As I was saying though I do agree with many other ideas mentioned, specifically the thought that you have to strip away the unimportant aspects of a design in order to get the best product. Minimalism is the key in my opinion, to creating a long lasting design. This is because trends in style come and go but a useful product can be used until something takes it’s place, not because it becomes ugly.
Some things discussed did ring very clear to me and made me start thinking about a topic I never have considered in this way before, the idea of product life cycle. Prior to watching the film I never thought about the flip side of the extreme pace of innovation in modern technology. If I put my tube television out on the curb it disappears, then I never think of it again except to curse it for having such a terrible picture. It goes somewhere though, and in most cases it seems like that place isn’t very economically friendly. The problem of a short life cycle is probably the thing that will stick with me from this film, and constantly make me question what the unintended consequences of innovation are.
Overall my definition of design has not really changed, everyone has a different way of saying it, or their own ideas about what goes into good design. I truly believe that design is much too large to throw under one sentence, but in the spirit of hypocrisy; design is the way we shape our world to fit ourselves, to make life easier, and to make things more beautiful.
Interaction design is the mix of industrial design, engineering psychology, business strategy, and art. Some problems that face interaction designers include, different types of people needing different things, the merging of look with function and user experience, the latter can be difficult for those who go to school for a degree in fine arts. Another problem is the outsourcing of industrial designers to cheaper workers who are just as qualified but will get a product to market for less. Innovation in the relatively new field of software design is a key part of the new interaction designer, and an importance on user experience will decide whether a software is successful. Another part of interaction design is the physiological aspect, trying to shape what people do and how they think, or don’t think about their actions.
Apple’s website is build in a way that is tailored to the user, but their own goals are clear as well. From looking at their site their goals appear to be selling their product, supporting their buyers, matching their design and branded standards, and promote use of their services and products. As far as the users needs after purchase, the site allows easy access to a page related to each of their many products and includes links to content related to starting use, and issues with a wide variety of topics.
Facebook, being a site that has changed a lot since its creation, has many functions on the feed alone. The site shows posts that are up to date from my “friends”. It allows users to search for people or pages. It has a chat system in place for users to talk. The site notifies users of events, birthdays, and messages. Navigation is also allowed through menus.
Hierarchical structure starts with a home page and branches off based on sub sections. rmu.edu
Matrix allows users to move from page to page by defining search criteria. amazon.com
Organic is free form and does not have clear paths from one page to another, and is based on user decision. wikipedia.org
Sequential can only be seen in one order, usually to tell a story or guide user through sections. Logging in to many sites follows this.
The Huffington Post’s homepage features very little actual content, maybe an 80% navigation to 20% content. It may appear to be mostly content, with photos and articles appearing over all the page, but these are just content snippets which function as Navigation to the actual content. This trend carries over to etsy, the site’s homepage focus is on getting the user to a page of content using snippets, as opposed to having full content on the home page. Google’s homepage has only the google logo as content, and the rest is navigation to other places. Wikipedia is similar to google in that it does not have any more content than its own logo on the homepage, with navigation to elsewhere.
Landor uses many elements of art to guide the user throught their site. Color plays a big part in eye movement on the web, in this case it pops against a white backdrop to instantly pull the eye towards the colors. Color also helps distinguish between different pages and ideas. Motion is also a huge part of the site, there is a want to move down by scrolling, then options to move to the side by small arrows, which are used over and over to create continuity.
Today I will be reviewing another restaurants website, but this time I will also be comparing it to the website that my group is currently finalizing. The restaurant that I was to find to review is that which could be in competition with my own imaginary fusion restaurant, “Cream & the Crop”, a restaurant I feel fits this bill is “Gaucho”. This is a small restaurant that serves Argentinian food, and boasts a wood fire stove. The reason I believe this business is in direct competition with “Cream & the Crop” is the location in Pittsburgh’s strip district as well as it’s unique style and reasonable costs. I will be comparing the restaurants’ websites, but first I’ll discuss the use of layout, color, texture and navigation.
Firstly I will jump into the overall layout of the Gaucho site. On the homepage we see a large container floating in the center of the screen with margins around it. In the top right hand corner of the container is the menu, featuring; restaurant, menu, find us, and reviews. It is slightly off putting that the entire top left hand side of the home screen is blank, as this is where users typically begin their search for a site ID and navigation bar. Then inside the box below the menu is a large logo followed vertically by an embedded commercial, and below that the address and hours of operation. Upon opening each of the pages in the main navigation menu I notice that apart from the home screen the rest of the site features a site ID at the top left of the screen. The center container is the only change on each page, getting larger or smaller to fit the menu, reviews, or map. The two boxes stating the address and hours of operation remain the same on every screen as well. Overall I think this site’s layout is simple and works well enough, but could be enhanced if the menu was in a place that felt more natural, and if each pages didn’t feel so disconnected from one another.
Moving on to color and texture in the design. The site uses a handful of colors to help unify the pages into one company scheme, but fails in some regards. The main colors of the site are a pale yellow, black, and light gray. These colors are used on every page, grey for main containers and menus, black in the text and logo, and a yellow background that also features a photo. This scheme works effectively to give the whole place a feel of south of the boarder food, but a few problems effect the overall effectiveness. Mostly the page that features the menu, on this page the main container has another container inside itself, this is the menu and it is very dark grey nearly black, with white text and a reddish boarder. the dark grey with white text is not seen anywhere else on the site and feels out of place. The reddish boarder could be explained as matching a strip of color between the yellow background and the background image, but these two colors even appear to be slightly different. As far as texture goes many of the colors are flat, which I don’t this is bad. Gradient effects are used sparingly on the menu bar to give a sense of roundness, and it works to create more interest on the menu bar. The largest problem as far as texture goes is the image that is found in the background of the site. The image is not high enough quality to be blown up so large, and has not been edited well enough to match the color scheme of the rest of the site.
Lastly is navigation, one of the most important things to keep in mind when creating a site. As already discussed there is an issue with the menu being located in the top right as opposed to the top left, this could confuse users as the first place they look is to the top left for a site ID and menu options. That being said the menu does it’s job, with a simple hover effect that shows what can be clicked on and what can’t be. But there is no way to tell what page the user is on based on the menu bar. This problem is made worse by having the word Gaucho before each page name so that’s all that can fit into the tab above. There is also no courtesy navigation at the bottom of the page, which is a useful tool when navigating a site. Other issues include blue lettering in places when they are not clickable links, and the logo sometimes linking to the homepage and sometimes being just a graphic. Overall the navigation is simple and while it does it’s job, it could also be improved on for the user.
The Gaucho website is not bad, it is very simple and does what it needs to in many ways. I feel that “Cream & the Crop” will have a superior website that will be usable and visually appealing. It will do this by having a more unique layout featuring a fixed menu that scrolls with the user, as well as unified pages. With a constant color scheme that gives a feeling of an old fashion ice cream shop while reinforcing textures that bring up visuals of potatoes. And finally by clearly showing where the user is, and featuring multiple ways to navigate to the same page, for a more organic user experience.
Today I will be reviewing two websites, both are for restaurants with locations in the Pittsburgh area. The first of which is Six Penn Kitchen, described on their website as a casual yet elegant american bistro located in the heart of the cultural district of Pittsburgh. The other being Center Ave. Slice, as local as you can get this pizza place is located down the street from my house and has been there for years. My selection of websites to review today comes from a want to distinguish between a local restaurant run by a larger conglomerate, and a family owned local restaurant. The two websites are extremely different from the home page on, I will discuss each restaurant as it compares to the other and how it stands up on it’s own.
Let’s begin with Six Penn Kitchen. I enter the website and see a banner with links to sections of the sit at the top of the page. This is reasonable as Steve Krug mentions in his text, Don’t Make Me Think, we tend to look for certain things in certain places, one of which is a menu towards the top of the page. This menu banner has the following links; menus, about us, private events, news & events, gallery, location. Along with these links is the logo of the site in the top left hand corner and the name of the restaurant in the center of the banner. As far as is mentioned in the text, having the name of the restaurant, or cite ID, at the center isn’t totally on course with normal reasoning which says it should be in the top left corner. The logo though is in that location and it doesn’t seem to hurt the overall design of the site. Above the banner is links to the top right that allow for joining an email club, following on Facebook, and reserving a table, with the latter in bright orange font. On the page there is images of the front of the building, food, and a mention of free WiFi. Finally a footer with an address and legal info. Clicking the menu link a new page opens with the same banner at the top but now with a sub header menu with specific dining times, brunch, lunch, dinner, ect. clicking each of these results in another page transfer and a simple list divided into categories with items descriptions and prices. The other primary navigation links offer there own purpose, all done with unified design, and a fairly elegant as their description promises.
Now to Center Ave. Slice. The websites home page is simple, a large red header box takes up about a fourth of the screen, “Center Avenue Slice” is in a bold sans serif centered above a menu of links; Home, Specials, Menu, Contact. These are easily visible but don’t seem to be in the correct order, the most important item, “menu” is third in with “home” being the first. The homepage is really an about page, because it features an embedded commercial, images of the food, a map, and a short biographical paragraph. The other menu links each take you to a page that serves it’s purpose, although the specials page features a lot of coupons marked expired and only one that is usable at the very bottom of the page. The Menu is simply two high resolution images of the print copy of the menu. This seems to work because you really get all the information you need to order including hours, address and phone number from this single page. The contact link allows you to see an embedded google map of the location as well as the ability to send a message to the company including your name email and phone number along with your message. The overall look of the site is minimalistic in the accidental kind of way but really lacks the polish that it could have.
After looking into both sites i’m going to compare the two using Krug’s important “things” for users to understand a site. Site ID is the name of the company whose site you’re using, and usually includes a tagline as to what they do. On both sites we see the Site ID centered on the page, a strange choice as it is usually found on the top left of the page, but in any case on both sites you can clearly see it and know where you are on the internet. Page name is the name that appears in the head of html code and in the tab of your internet browser. Once again both pages use these tools to help the user, but in the case of Six Penn the page name also includes the site ID. As an example the location page of each site is named as follows, “Location|Six Penn” and “Location” the latter being that of Center Ave. Slices site. The addition of the site ID helps the user who has multiple restaurant websites up at once, which occurs often when deciding between two or more places to eat. Primary navigation is the main menu so to speak, the most important links on the page. They run along the header in both sites but as mentioned before the order of Six Penn’s links makes more sense than that of Center Ave. Slice’s. The local navigation is the second level of menus, in this case only Six Penn has a second level of navigation, with Center Ave. Slice having one page per main link. Location indicators are simply ways that the user can tell where they are in the site. In the case of both restaurants they use slight changes in the primary links to show which of them you are currently viewing. Six Penn’s change to green when on their pages, and Center Ave. Slice’s are surrounded by a lighter box when selected. Finally a search bar, which is a way of finding pages on a site using inputted text. Neither site has a search bar, this is something that could help the type of person who has no time or care to look through a whole site for information. Having most of the important things helps both sites to be adequate for what is needed of it, with most of the differences being in time and polish put into the design of the site.
Today I will be reviewing a website that interestingly is made of only one page. These websites are great in a lot of ways, there’s a clear way of viewing the page, as opposed to being able to go to any page on the site. It also can cost less depending on who you pay for hosting or designing your site for you. Sites like this are becoming more and more popular for all their benefits and while they aren’t perfect for every use on the web they are still important to understand.
On the website “one page love” you can find a large number of sites that utilize only one webpage, it’s a great site itself and highlights the best one page sites of a certain week. While going through the site I saw a visual striking thumbnail that I clicked on to visit a site about bandages.
As far as texture and color are concerned, this site is a lot of striking black backgrounds, and this is done really well for a minimalist look. Along with the stark black is a panel that is made to look just like a large patch of human skin, this is one of the best parts of the site as it showcases the products, bandages, with an appropriate background. Against the black the light skin texture causes extreme contrast, which pulls the user through the page.
The navigation is simple, in that it is only vertical. This works because the visuals of the website are very minimalistic and simple and the content layout mirrors this minimalism. The vertical site is broken into panels that either have information or visuals and go back and forth between the two. It also makes sense to be so linear because this is really just an advertisement and so it just gives the viewer what they need to understand.
As I have stated before the minimalism and contrast makes the site really easy to navigate as it just continues down vertically hinting at what the site is about, then explaining the product in text then revealing each bandage, finally showing the bandage on a mans neck in use and explaining the background of the product. Another great and useful tool on the webpage is the fixed buttons that scroll with the user and constantly allow them to purchase the product at any time.
I personally love this site. It’s a great example of how you can have a product website and make it simple so that any possible buyer can navigate it and buy the product. Simplicity and striking design are used together to make a really user friendly site that does what it needs to do.
source: http://sherwoodforlee.com/works/boo-boos/
Today I will be reviewing the positives and negatives of a site that millions of people all over the world have used, Ebay. For my test I will be looking for an alarm clock to purchase. Upon entering the site there is a lot going on, as with many sites specifically e-commerce sites. As I read in “don’t make me think” as users our eyes are drawn about the page and scan without reading much specifically. The first thing that jumps out is a large box at the center of screen right with a title reading “hot new deals” along with photos of furniture. Because I am looking for an alarm clock I don’t click on the hot deals box and instead find the search bar, which is at the top center of the page. This may be because when the page loads it’s directly in front of you and is easy to find and use. As I begin to type in “Alarm” the search box drops down and shows the phrase “alarm clock” in an attempt to guess my full search, also giving me the option to either search for it across the entire site or just a specific category. Along with the correct search of “Alarm Clock” comes many other terms beginning with Alarm that I do not need. After typing in half of alarm clock I select the phrase with the category”home decor” next to it. The next page that appears is the results of my search, once again I scan the page and end up following the pictures of different alarm clocks down the center right of the page. On either side of the listings are advertisements, some for other products on Ebay, others of outside companies. I scroll down the page looking mostly at the photo of the item and the price. Because I have a good idea of the type of clock I want I find my way to the left most side of the page at the top. Here I find the options such as price range, color, and style. I select the check mark next to the color black and the page changes slightly in the center to only display black clocks in the photos. I then select modern under the styles option and a similar result occurs with the items listed. I continue to scroll down the page until I find a clock I like. After clicking the blue name of the product it takes me to another page with details of the clock, including price, shipping cost, delivery time, and a description of the product from the manufacturer. I see more photos of the clock and decide I want to purchase, so I tap the large blue “buy it now” button. The page I am then brought to is a conformation page outlining my total costs shipping address, which is already filled in from having used cite in the past, and my payment type. Then in blue at the bottom right hand corner is a button that asks that I confirm the purchase.
I went into the review of this site thinking that any tools that helped me to find my product should be considered positives, and those that were confusing or misleading be negatives. That being said the site is more over positive, Right away when you enter the site you can find the search bar, which is the most important tool when you already know what you want to buy. At the same time if you are simply in the mood to buy something there are plenty of windows that advertise deals and special products on the site right now. While searching the auto guess is pretty spot on if you’re looking for a fairly normal product, like I was, and the ability to choose a category is a great addition to get you to the product you want even faster. Once you have searched for your product the results are the most dominant things on the page, each clearly showing the price and photos of each product. By far the best tool on the page is the narrowing of the search through the options that I mentioned like, color, size, cost, and material. When there are millions of products for sale on the website the more detailed the search options the quicker that you can be connected to the product that you want. Finally the buying process is easy to do and works with the user step by step, stopping them any time that something is filled out incorrectly and waiting until all fields are confirmed.
The biggest problems with the site for me were based in formatting. While the search bar was easy to find it would have been more difficult and taken longer to locate the search bar, many important links to categories are in plain black text that doesn’t specifically denote a clickable link to someone that is simply scanning the web page. Along the same vain of reasoning, the search option tool on the left side of the screen are plain black. I found myself scrolling down through the page and viewing the listings for a time before going and changing the settings to get me closer to my desired look.
Overall the site performs very well and is easy to use as a means of finding and buying products from all over the world, as well as comparing the prices of items from different distributors. This seems only to make sense with a website that is so well known and used. There are specific reasons that some sites fail while others make million each year, and it has a lot to do with the interface.