Thursday, May 26, 2011

Blog Topic #10: iPoint Critique (Extra Credit)



The iPoint Advisors websites created by our class all had unique design solutions despite having identical content.

One of the best design ideas I saw was to break up the public and private sector content of the "Services" topic into different sections, as Amy and Nichole did. By using two pages instead of one, the page content became more user-friendly. The content was easier to read because it was about half as long as it had been originally. Alternatively, Suzanne's solution was to use collapsable spry panels to hide or show content as needed. This idea kept the content on the same page but allowed the user to select what topic to view. Many students split the public and private sector information into two columns. This solution was also effective but ultimately I prefer using separate pages because it kept the content more manageable. Regardless of how the Services information was presented, appropriate formatting of the font and effective use of lists made the information more clear to the user.

A second design element that supported usability was the selective use of repeating elements throughout the various pages. For this reason Gary's iPoint Advisors website appealed to me in particular. Gary used a muted color palette with a bright orange accent throughout. A vertical orange boarder brought attention to menu options and various content sections. A vertical gray line was also used to indicate secondary information. Although this element was simple, I thought that it helped to unify the website and give it a professional look. Other class members used repeating colors to unify their iPoint Advisors websites. For example, Pamela, George, and Eric all used a signature color to connect the different areas of the web page. I thought that the use of a color that visually linked the menu, header and main content helped to give the site a professional feel.

Lastly, a design decision that helped to create professional but friendly website was the creative use of space. Langa, Suzane, Nichole, Fawn, and Amy all used space in a way that I had not expected. Rather that the traditional columns, their websites placed information at unexpected places on the page. The information was still very accessible to the user, so the design was very effective. A different format for the website made it feel more modern and customized. It also made me a little more inclined to pay more attention to the website. Rather than just skimming over it, the user is probably likely to examine the website more closely.

If I were choosing the iPoint Advisors website, I would probably choose Suzanne's site. I think that the unique layout of the site is appealing. It looks very professional but it not intimidating or too formal. It gives the impression that the company is comfortable with the internet, and will probably answer their email. It helps iPoint Advisors to appear quite competent and dependable.

If I were to redesign my iPoint Advisors website, I would be sure to include more repeating elements. The simple addition of a partial colored border would help to showcase the information and images more effectively. I tried to remember this for my final project by repeatedly using boxes and rounded corners. Although I tried to use space a little differently on the iPoint Advisors site by using a horizontal menu bar and a vertical page id section, I could have pushed the layout a little farther. I admire the design solutions that used an unconventional but still functional layout.

Saturday, May 21, 2011

Blog Topic#1: Cool Site (Repeat)



The website Framerate Fest is a site sponsored by IE9 which showcases the potential of HTML5. Ultimately, Framerate Fest was an online art competition for creativity and interactivity in programming.

The page is broken up into a grid of frames. Each frame features an interactive animation coded in html. By clicking on the frame the animation is brought up and activated. Most animations were interactive fractals or lines featuring shifts in color and position. A few frames, including the winner, were more obviously simple games with objectives and clear outcomes.

The layout of the source code of each frame varies. Many frames simply state that a custom javascript was used. Other frames list the instructions that correspond to the user's mouse or keyboard actions. Occasionally, information about the game or design was in the code.


Framerate Fest does not have any informative content or extended experiences. The purpose of the site is to simply explore multiple animations for a few seconds or for a few minutes for the games. What makes this site stand out is obviously the degree of interactivity and graphic options offered by html5. The animations themselves may not be spectacular when compared with other game options on the internet, because they were programmed in html they help to show the potential for the internet in the future.

Blog Topic # 9 Web Critique and Analysis




The websites for Rubio's and Chipotle have similar purposes: promotion of fast-casual Mexican restaurants. Each site aims to tell the brand story while also providing information about the food and locations. However, both sites prioritize branding over actual menu information.

In keeping with its "Baja Fresh" concept, Rubio's clearly has a beachside food stand theme. The prominent design elements such a waves and palm trees reinforce this theme. Its intended audience is broad; older and younger customers and both men and women are welcomed on the site. Chipotle's audience is likely to be broad as well. However, the design is more cutting edge and would likely appeal to a younger audience as well as an audience that is more experienced with internet technology.

The Rubio's website has a horizontal navigation bar that is present on all the main pages. The navigation is static and straightforward, which in some respects is a strength because it is easy to find the information you need. In contrast, Chipotle has a much more layered navigation method. There are various ways to access the main content pages. Additionally, through color fade outs, highlights and font changes Chipotle uses more complex design elements to indicate navigation options. Although there are many page options, navigation through Chipotle's site is clear because the simple drop-down menus are effective. The menu and nutrition information is not particularly clear, this is more likely due to the many menu options available at Chipotle rather than the site layout or navigation options.

In terms of overall design, both Rubio's and Chipotle use simple and consistent color schemes. Each site clearly has usability in mind. The graphics and photos that are used are intended to support the brand identity rather than provide information. The animations that are used (such as waves on a beach or tilting pictures) express a sense of fun and exploration. Once again Chipotle clearly has the edge over Rubio's in terms of design elements. Chipotle has more interactivity and animations, but these elements are not intrusive. It is likely that the information on Chipotle's site would have difficulty displaying properly on older browsers or through dial-up modems. However, this is clearly a sacrifice that Chipotle is willing to make in favor of a more interesting and interactive website. Rubio's site would not have as many limitations for older browsers or slower modems because it uses more straightforward information.


Despite the similar purposes and themes, the two websites have different ways of presenting information. While Rubio's has a traditional website, Chipotle takes a more cutting edge approach. The horizontal navigation bar and roll-down submenus throughout all pages are traditional elements. However, the additional unique options that appear on each page, as well as the large amount of content, allow the website to be more layered and nuanced compared to Rubio's. The layout of each page is very similar. This allows a sense of continuity throughout the website. However, the "Catering" page has a completely different design. In my opinion although in a practical sense it is probably necessary to significantly differentiate the catering page from the others, the design shift is too abrupt and jarring. In contrast, Chipotle's design is not consistent across its various pages. Dramatic shifts in layout occur frequently. Despite the various changes that occur, Chipotle's well developed overall design scheme allows the identity of the site to always be apparent. The consistent color scheme, repeating dotted lines and method of presenting images ties all the pages together so that the unified whole is never lost.

Both websites are useable by those using screen readers. When the sites do not display styles, the text is easily accessible for all menu pages. Chipotle even manages to retain its visual appeal because the images that appear integrate well with the text and are often large and clear.

The naming convention for the various pages on the websites are more simple and consistent on the Rubio's site. This difference is due to the more layered navigation that Chipotle has. Additionally, the name s of the pages reveals the more extensive use of different technologies on the Chipotle site. Chiptle's pages seem to be written in aspx instead of html. ASPX technology, in addition to the use of Flash, allows the website to feel more interactive and interesting. Rather than being a static menu and location list, the website draws the user in through animation and movement. Although the Rubio's site is clearly sufficient in terms of usability, Chipote's site stands out as more highly developed in concept and execution.

Both sites use Flash animations and javascript. Chipotle uses Flash to display short movies about its restaurant and employees, while Rubio's uses Flash for buttons and animations. Flash is utilized more extensively by Chipotle. The flash animations are incorporated seamlessly into buttons and movies. These animations give the site character and depth, rather than distract from the content. The design of the animations meshes well with the overall design of the site. I am not sure how the extensive use of Flash impacts the website on mobile internet. Given the edge of development on the main site, is highly likely that Chipotle has a site that is accessible on phones and iPads. Rubio's use of Flash is smoothly incorporated. No animations are distracting or seem unnecessary.

The overall design of Chipotle's website is also stronger than Rubio's. Chipotle clearly displays stronger branding through their design decisions. Chipotle and Rubio's both use simple, neutral color schemes with an accent color used throughout. This design element provides a sense of repetition and consistency. Both sites use clear and clean pictures. Rubio's uses fewer images but all images are crisp. Chipotle often stylizes its images to look like snapshots. It also repeatedly uses elements that look hand-drawn, which reinforces the hands-on experience of the restaurant. The frequent use of a dotted line throughout the site also ties the pages together despite the shifts in layout. In keeping with its playful tone, Chipotle consistently places its images at a slight angle.

Both sites use distinctive header fonts throughout their sites, which contribute to the sense of personality that each site has. Although Rubio's site uses a simpler design compared to Chipotle, for many uses this may be a strength. Rather than a potentially overwhelming amount of options and information, the options of where to go and what to look at are straightforward and streamlined.

Chipotle's design and content effectively support its marketing goals. The site encourages exploration through unique content that is accessed in an interactive manner. Rubio's site is effective in terms of content and navigation. Although its design is simpler, the website certainly has a distinctive look without feeling too slick or over-developed.

Thursday, March 31, 2011

Blog Topic # 6 Experience Design


In the broadest sense, experience design is fully interactive. Regardless of the medium, experience design uses our understanding of the real world as well as our use of the five senses in order to more effectively create a compelling experience. A sense of time and space is preserved while interactivity is maximized. A website that uses experience design must balance the user experience with the design goals. Sufficiently simple access to information should not be hindered by overly complex navigation.

The website Aualeu (Aualeu.ro) uses experience design effectively. It is an interactive site promoting a Romanian theater group. This site's mood is appropriate to the whimsical design. The site does not contain the traditional spaces for site ID, menu and content. The site is highly artistic, as it uses graphics very heavily. Visitors select what information they want to look at by clicking on moving objects, dragging selected areas of the page of the or by moving the mouse off the page. The user must actively engage in exploring the website in order to get any information at all. The overall impression is that the user is compelled to conceptualize the website as a somewhat 3-d space rather than a traditional list. Due to the higher level of interactivity,the website loads a little more slowly than traditional websites. Aualeu.ro acknowledges this by telling the viewer "Loading takes forever. Why are you whining?" In this case the navigational complications of experience design allow for a greater sense of drama.

The instructions for navigation are somewhat vague, which encourages a sense of exploration. Next to a figure of a semi-mechanical boy the website includes the instructions, "Oh! Oh K! Go to boy-menu, show him where you want to go and then place you mouse at the border." This type of navigation is intended to engage the viewer in the total Aualeu experience. Rather than simply observing the content in the most straightforward manner, the user feels more involved in the creation of the meaning of the website.

Although I found the navigation something of a challenge at first, the website design is ultimately more powerful and memorable than a traditional website. Finding information became an exploratory game. The website does offer a "petite" version, which lays out the information such as the Auleau background and a listing of performances in a traditional website. This option ensures that users who do not have the time or inclination to explore will be able to get information easily. By providing an experience design-oriented site along with a traditional site, creativity is reconciled with the need for usability.

I don't think that experience and design are mutually exclusive. Experience design is obviously not appropriate in some cases. I think that it is likely that as people become more adept at using technology and as technology continues to develop usability, the use of experience design will be expanded.

Wednesday, February 2, 2011

Topic # 1: Good website: Cascade Brewery Co.

The website for the Australian beer company Cascade Brewery Co. has a good balance between content and design. I can’t stand when websites make the information hard to find. One reason that it looks different from many other sites is because it does not have the typical dropdown menus. Instead, all the menu options are shown as buttons on the main page. This makes navigation through the site less awkward and more convenient.

Although this design might not work for a more extensive website, the fairly simple content of this site is suited to this type of menu. Although this kind of menu format runs the risk of being a useless jumble of buttons, the site uses different sizes and colors to show which items are the most important, such as News, Locations or different types of beer. The site map is clearly shown at the bottom of the main page in case the menu buttons are not obvious enough.

This website allows you to customize the menu items. Instead of a single option for how the website looks, you can choose which categories of information you would like to see. This choice makes the website a little more interesting and different.

The site generally makes the information easy to find and has a clean and modern look. Although is site is not too flashy, it has a interesting retro look to the graphics. The animations are interesting without being overwhelming. The videos on the site are very unobtrusive because they are incorporated into each webpage and do not automatically play. The site uses html.