Author: KatieCarlton

For my final review, I will be discussing Pizza Roma’s website (pizzaromamoon.net) and how it compares to my group’s restaurant, East Carson Bistro. First, Pizza Roma has their logo above a nav bar and has a photo slider. We plan on having a similar layout, but we are using a three column system in order to add space on the sides of each page for future information or advertisements. They also have a footer that contains business information, location, and legal statements. East Carson Bistro plans to have a footer with similar information. Pizza Roma appears to use a 2 column layout system with the left column being larger than the right column. An image is always at the top of the page showcasing the message or mood of the page. East Carson Bistro will be using a similar technique because we feel that this kind of layout quickly shows the viewer what information they will find on the current page.

They have persistent navigation, which is explained in Chapter 6 on page 66 in “Don’t Make Me Think” by Steve Krug. Persistent navigation is any navigation element that appears on every page such as Pizza Roma’s Home, Appetizers, Salads, Wings, Pizzas, etc. in the navigation bar. Some may even include drop down sections to allow the viewer to have a more direct search. On each page, they tell the viewer that they are on Pizza Roma’s website and that they can navigate to any page from any page. This is an important layout and navigation tactic that will be used on East Carson Bistro’s website.

Their use of warm reds bouncing against cool greys sets up a successful contrasting color scheme. Coincidentally, East Carson Bistro choose colors that are very close to the same tint of grey and pure tone of red. Their grey is more of a darker shade of grey whereas our grey tends to have more of a tint to it meaning that their grey has more black and our grey has more white in their tonal values (The Principles of Beautiful Web Design: Chapter 2: Color pages 50-51). It has been a persistent study in color psychology where warm colors such as reds, oranges, and yellows seem to stimulate hunger, anger, heat, and motion. These colors tend to be more stimulating and provide more engagement and interaction. We want our customers to be hungry, but in a controlled method, which seems to be what Pizza Roma did by having the red balanced with a dark grey that prevents the viewers of the site from being over stimulated or subconsciously aggravated (The Principles of Beautiful Web Design: Chapter 2: Color pages 50-51).

As for the texture on Pizza Roma’s site, the nav bar demonstrates color change when hovered over or clicked, which leaves it feeling very flat. They have a pattern of their logo repeating in the x- and y-axis in the background behind their content sections. The value of it is toned down so it does not distract from the content on each page. The only three dimensional feature would be the moon in their logo with an outer glow and slight drop shadow of the text (The principles of Beautiful Web Design: Chapter 3: Texture pages 95-98). Our logo is very flat and made out of typographic letter forms leaving a sharp texture from the thicks and thins of the letter strokes. It seems that Pizza Roma’s uses about three typefaces (not including the one in their logo) and each of them are a form of Sans Serif utilizing thick weight for bold headings and a thinner weight for more detailed content. It may be too many typefaces battling for their place to set the overall theme of the site. We plan to only have one type family with no more than three weights or versions such as bold, regular, or italic.

Pizza Roma has obvious hierarchy for their navigation. For my first time visiting their site, I can identify where I want to look for their salads, calzones, or contact information. I do not need to jump around to find information because it is clearly labeled on each and every page. Having the nav bar being persistent on every page helps the process of visitors heading straight to their desired information. I feel this site does not need bread crumbs because the site layout goes down to one to two level from the home page meaning it goes from the homepage to content pages and then across to other content pages like pizza to wings or back to the home page. There is only three instances where the dropdown feature of the nav bar brings up an additional page (ex. appetizers then desserts), but that is the only way to access those pages through the nav bar (Chapter 6 “Don’t Make Me Think” by Steve Krug).

East Carson Bistro will stand out as higher quality over Pizza Roma. We will utilize a similar layout of hierarchy with a photo slider and persistent nav bar. Our menus are simple in each section with a clear line to the price. Our photography and corporate identity will be the strongest part of our brand to make our site stand out. We believe having a strong structure for our identity and target audience would help give us a more stable plan for building our website and attracting web traffic.

–Katie Carlton

For our third site review, I will be analyzing Peter Allen’s Italian Restaurant’s website and Six Penn Kitchen’s website.

The first thing I noticed was how Peter Allen’s site adjusted to my browser window by using a different layout. Six Penn Kitchen made me have to scroll horizontally in order to see more of their information if my browser window was too small. So Peter Allen’s has an adjustable layout. Both sites utilize “persistent navigation”, which Krug describes as a “set of navigation elements that appears on every page.” They avoid the “happy talk” on their main home pages and stick to their message on each subpage such as dinner foods with their dinner page instead of being on their gallery page.

I noticed each site strives to have an image towards the top third of their web pages with information and links following afterwards meaning they have similar layouts. They tend to emphasize their product and service as well as the overall emotional feel they want their restaurant to portray to its customers. Personally, I feel that both sites are balanced when it comes to their imagery and information. They have clean navigation and they allow the user to “browse first or ask first” in Krug’s words. Each site gives the user freedom to explore, but also quickly find the information they are looking for. The unity is tied together by having their logo and “persistent navigation bar” on each page along with similar wireframes, color scheme, and typographic selections.

In contrast to the examples shown on page 62 of Steve Krug’s “Don’t Make Me Think–Revisited”, both sites would be considered easy to navigate and find information within a user’s first visit. In the figure shown on page 62, most sites require subsequent visits in order to memorize the paths to specific pages of information. However, each section is clearly labeled and has specific information pertaining to the labeled sections therefore making the sites user friendly.

As another observation, every page on both websites sticks to their overall message and identity. Krug talks about how people do not always enter a site through the home page anymore, which can tend to be a problem. In contrary, Peter Allen’s and Six Penn Kitchen successfully deliver their message and overall identity on every page while leaving their layouts clean with quick access to the homepage. No matter where a user enters the site, they know what site they are on.

I have a personal preference towards Peter Allen’s Restaurant because I feel like the information is not as concentrated and squished on their website. Their identity is brighter and more uplifting than Six Penn Kitchen’s identity appeal. I also like how their website is adaptable to the browser window, which is good for mobile phones and tablets.

–Katie Carlton

I decided to review the site www.onebustapp.com, which is promoting a dice game for the iPhone called OneBust.

First, I tested it out when I had two windows of the browser snapped to either side of my screen in OS El Capitan. It showed the game’s logo up top and centered with a “notify me” bar and an image panel that has 3 views. Step 1 states to Roll the die. Step 2 says Lock-In Points with a larger details paragraph explaining what they mean. Step 3 says Win the Daily Championship. At the bottom of the page are links to their respective Facebook and Twitter accounts.

Second, I tested the site out without the browser windows being snapped and just floating on top of each other. The site for OneBust starts out with the logo, “notify me” bar, and two simplistic illustrations of the iPhone with the app being active. As you scroll down the page, the larger of the two iPhones gradually slides to the right over top of the other illustration. Step 1 appears as Roll the die and the iPhone screen fades into the first image of the app that the user would see. Step 1 slides up the page and Step 2 slides into place below the logo, which seems to be stationary and floating above the rest of the content on the web page. Step 2 slides up the page and Step 3 slides into place below the logo with a bold vermilion background showcasing the feature of Win the Daily Championship. This step includes a new image in the iPhone illustration showcasing the screen the user would encounter.

For the color scheme, it is a bold vermilion, white, teal-mint green, a soft beige, and the text seems to be in two shades of grey. This group of colors makes it feel simple, clean, and relaxing with a few bold accents to keep the eyes engaged in the “super-simple-frustratingly-fun” game. The texture is flat, crisp, and smooth.

Navigation is different for how you have the site opened. In the first step I explored the site, I had to click the navigational bubbles to get from step to step. It was a bit slow, but I believe that is due to the wifi connection I had. In the second step of my review, there was a bit of a loading lag for the site to recognize how far I had scrolled, but once it caught up, the navigation was a simple vertical scrolling motion.

I feel the elements of the webpage made it simple and easy to maneuver for any web user. There was little interactive elements, which I feel assisted them greatly in the simplistic message the developers wanted to get across for their app. The page flowed smoothly with plenty of space for each step to showcase in the browser window one at a time.

Personally, I feel the design is executed in a well-developed manner. I like the simplistic style and relaxing color scheme. This seems like an app I would look further into on the app store after seeing it in the app store or online. The illustration is clean and the layout flows with each step and fitting right below the floating logo. I like how the iPhone screen changes for each step or featured element. This is a strong one page website.

I also feel that if the artwork was made to look more 3-Dimensional, the app would not have been showcased as effectively. Even if the color scheme had more pastel colors or consisted of primary colors, the content would not have been as soothing to the eye or as  mature.

–Katie Carlton

–American Eagle Outfitters www.ae.com

I frequently look at American Eagle Outfitter’s website for deals on their rather overpriced clothing.  I am a bargain shopper especially during the holidays. Depending on the platform I access their site, the usability varies in level of difficulty. When I first access the site, they always have the most recent news plastered in bold blocks of information on their homepage like “New Arrivals”, “Sales”, or their “brands.”  Currently, each block of information is self explanatory. For example, if I want to shop their “Save up to 60% on Clearance” special right now, I can click “Shop Women”, “Shop Men”, or “Shop Aerie.” They are the 3 most common choices their customers make without thinking.  They have a header of 6 options ranging from “Women” to “Clearance” at the top. If I want to go to the cheapest clothing, I know to immediately click on the “Clearance” link since it simply states where it will take me.  However, they appear just as text, not as button. I believe it is through conditioning of multiple websites using this kind of technique that online shoppers know that text explaining “women”, “men”, “clearance”, etc. will take us to the specified location without necessarily having to have a “button” appearance.  One feature I have always liked about American Eagle’s website is how they always have a photograph of the product that makes it obvious about what the product is, how to wear it or use it, and that you can click the image to look at more information or buy the product.  It does not require a lot of thought. It’s so easy even my older relatives know how to maneuver the site when they are shopping for their nieces, nephews, and grandchildren.  As for the format of the site, the most important information is in larger sections that take up the majority of the site’s visual space.  Product names and prices are significantly smaller than the corresponding photograph because American Eagle deems the visual of the product is more important than the name of it, but the price follows by being larger than the product name.  Their pages are easy to scan with a helpful “Back to Top” feature since their pages tend to scroll on for what seems like forever in the internet world.  The most important information is easy to scan through quickly and the more detailed information is on single product pages where you see the image, product name, price, size information, and availability. Unnecessary information is never immediately displayed when viewing their products.  The user must work further into the site mapping to see more detailed information.  If I am in a hurry, I scroll quickly looking at contrasting colors that will cause me to pause and look at an item I may like.  It is easy to go back to a previous page without having to start back at the top again.  (This is not the case in their app on the iPad or iPhone.) Overall, I think their main webpage is easy to use, but their apps are much more difficult to maneuver and have significant bugs.  The website usually loads quickly and is not flashy so it is easy for the eye to flow through the information and not become over stimulated. Important information is bold, large, and easy to find. Hovering over bits of information all over the site makes submenus appear.  The site is layered, but the layers do not need to be accessed in order to work through the website to achieve the ultimate goal of making a purchase.

–Katie Carlton