Keeping Up Appearances in Website Design

Bruce Tognazzini’s online article “First Principles of Interaction Design” suggests a specific guide on essential and effective formal applications in web design. Tognazzini’s must-have list goes beyond the importance of effective design elements such as good typography, recognizable icons, or manageable navigation. Consideration should also take into account the efficiency of the user’s time and engagement of the website. This includes such factors as personal exploration, maintaining interest, reliable feedback, anticipation, customization, and memorable processing.

The content of the website, no matter how organized and visually appealing, should provide personal meaning to a user. Jeffrey Veen, founder and CEO of Typekit, believes that users want to find their own discovery when presented with data in table formats. Veen believes that the tools provided in the website should allow the user to interactively connect and filter out information important to them.

For example, fertilityfriend.com allows women to monitor their specific ovulation cycles in an interactive chart telling them what is a good time to get pregnant. The indication for the best time period for a woman to have sex to get pregnant is indicated when two red lines on this chart interact with one another. This website allows for a female user to personally control interfaces in this chart that ultimately reflects an important life-changing decision.

fertility friend

Personal Chart from fertilityfriend.com

Besides Tognazzini’s standards for effective user interface, web designers also need to take into account honest and reliable promotion of a website. Paul Boag suggests the owners of websites rely too heavily on quantity of content as opposed to the efficiency of the website. Boag criticizes the reliance of social news website Digg.com to promote other websites since visitors will usually scan Digg.com’s homepage and not neighboring links. This results in little or no visitor returns with the possibility of no one blogging posts or defending the website from criticism.

It is not advisable to deceive users into exploring there website. In 2006 car manufacturer BMW violated Google’s SEO guidelines by using doorway pages. Doorway pages are web pages that spam the index of search engines in order to redirect users into visiting a specific website. The overuse of JavaScript code unrecognized by Google displayed the over use of the word used car. Eventually, Google removed BMW as a top ranking search term.

Above BMW’s webpage with overuse of Java Script.

Below the revealed appearance of a doorway page.

Although Search Engine Optimization (SEO) and social media forums such as Facebook are useful tools to attract visitors, it is often overlooked as symbols of instant success. In order for users to be interested in your website Boag emphasizes the importance of building relationships through online forums and communities connected specifically to your target audience. Website owners need to invest a considerate amount of time through these relationships as well as monitor the success rates of their unique URLs.  It takes time but with realistic budgeting, online participation, honest campaigning, and Tognazzini’s guide the user will find your efficiency in your website.

Links

http://blogoscoped.com/archive/2006-02-01-n31.html

http://www.fertilityfriend.com/cg/

http://en.wikipedia.org/wiki/Doorway_pages

http://boagworld.com/season/1/episode/6/

http://www.veen.com/jeff/index.html

Advertisements
Posted in Uncategorized | Leave a comment

The Complexity of Everday Websites

According to Don Norman’s book The Design of Everyday Things the inefficiency of product design can be traced back to how the user is unable to visually understand how to control all the functions in a overwhelming and complex design. The most common problems of multi-functional design can be attributed to incomplete capabilities of a function, the arbitrary nature of functions, and the uncertainty of the presence of feedback in a function.

Norman argues that the best product designs possess fewer controls that are specifically assigned to single functions.  This results in a memorable systematic process attributed by visually understanding how the design works by simple navigation and reassuring feedback.

Simple navigation, recognizable functions, and reassuring feedback is crucial for even website design. Similar to Norman, Vincent Flanders argues that complex elements can be less taunting if thought has been put into the overall structure of the website. When there is no thought in a well-structured site, any form of CSS or intriguing content won’t save the site.Flanders provides an example on his site Websites that Suck where good design is abandoned in Arngren.net.

http://www.arngren.net/

We see here that there is no clear hierarchies and organization of the content on the homepage.

The most common annoyance that Flanders often notices is in misleading links or mystery meat navigation that cause a visual disconnect to the user’s memorable process.  In the menu bar of Stephan Potgieter’s website the user discovers that options do not appear visible from the drop down menu until he or she randomly clicks on the menu. Even if you figure that out, you’ll probably feel irritated not remembering what you last time clicked on.

http://www.youtube.com/watch?v=7GFXk-5tEhg&feature=related

On the other hand websites that apply minimalism in presentation may not always be necessarily the best option. Kayla Knight suggests that not all users appreciate the look of minimalism since the certain audiences want to see constant updates (image or type based such as the Self magazine website shown below) on a homepage or don’t want to be put off by the generic appearance of a website such as EjConFerence.net

http://www.youtube.com/user/vincentflanders#p/u/37/si4qm8dlYNc

Knight states the best sites that benefit the most from minimalism is designers. Personally I believe that as long as the design of the site has good contrast, hierarchy, and organization the user will likely visit the site.

However, Norman does point out that added complexity usually can’t be ignored as designers are faced with consumer demands and client expectations to build today’s product with more content than last week’s product. The same holds true when designing or redesigning a website. Dean Schuster, a web designer and founder for Truematter believes that designers need to stop making preconceived notions of how a user is suppose to behave. The thought process that Schuster suggests is to empathize with clients and the client audience in a friendly relationship. This results in a better understanding on how the website should be navigated. Steven Krug who is author of such web usability books as Don’t Make Me Think and Rocket Science Made Easy tests the effectiveness of a website by using a person who is not a designer. On video tutorial, Krug uses a part-time school teacher as a tester to examine the navigation of the website Zipcar.http://www.sensible.com/

LINKS

http://www.unmatchedstyle.com/news/debunking-user-experience.php

http://www.youtube.com/watch?v=7GFXk-5tEhg&feature=related

http://www.webdesignerdepot.com/2009/12/when-minimalism-backfires-when-too-little-is-not-enough/

www.webpagesthatsuck.com

http://www.sensible.com/

http://www.arngren.net/

http://www.youtube.com/user/vincentflanders#p/u/37/si4qm8dlYNc

Posted in Uncategorized | Leave a comment

The Good and The Bad of Emotional Design

Emotional design is the process of how a user responds emotionally while viewing and interacting a product based on its visually appearance. According to Donald Norman’s theory on emotional design the user is more engaged in a product that is visually appealing to look at resulting in positive emotions. A positive interaction of a product is based on Norman’s three levels of processing an emotion which are visceral (the automatic response to a feel good based on the visual appearance i.e. smiling face), behavioral (successful behavior resulting in accomplishing a specific task with the efficiency of the product), and reflective (the knowledge of how the product is meaningful in a personal and cultural way).

Norman also stresses that positive emotions allow designers to be more creative and explore possible alternatives to problems whereas negative ones allow designers to focus on specific details of a problem in an anxious state. A person in a positive emotional state will even ignore minor flaws of a product provided that the product maintains that positive experience. However, the challenge that faces a designer has on designing a product is that emotional responses will vary among the user’s individual preferences.

Stephen Anderson who has studied the emotional impact on web design believes that users are motivated to visit certain websites provided that these websites are playful in a meaningful way. Anderson describes this process as serious play where the user elicits positive emotional responses based on unexpected pleasant surprises or meaningful challenges regardless of the content of the website.  One of the examples that Anderson gives is how Mail Chimp (a network allowing businesses or individuals to market themselves using email campaigning) is able to relax users based on the site’s presentation. Mail chimp displays its quirky mascot that says random witty phrases or can provide links to funny videos despite its serious business applications.http://boagworld.com/design/emotional-design/

MailChimp also fits into Norman’s theory in positive emotional design as users feel satisfied that they can accomplish sending newsletters through email through a step by step do-it-yourself process. Furthermore, users are able to customize their newsletters allowing the use of creativity to reduce stress when figuring out a problem.

Sometimes spotting flaws in bad design can attract people if the bad or ugly product is given a cultural status provided it is meaningful to the viewer. Bad design may not work well visually or function properly, but sometimes it can still elicit a positive emotional response when it is meaningful.

Nowadays in the worldwide web, online reviewers are able to discuss shoddy product design using gimmicky and witty presentation to create a positive emotional response (as long as you are not the creator of the failed product). Ideally this is beneficial for designers to listen on how they themselves can make better products.

As a self-publisher of a comic I am always finding better ways to present my comic through my website or through print. Often I watch an online video called Atop the Fourth Wall that talks about comic books that are horribly written and drawn. The reviewer Lewis Lovhaug owns these bad comics despite his grievances with them. However, he is able to create positive emotional responses from his subject matter by presenting it as informative and entertaining for anyone curious about comics. Similar to Anderson’s theory on serious play Louvhaug will often use an attractive presentation such as whimsical costumes; animation effects, comedic asides or getting into character with impressions that can be unexpected yet elicit a positive response. When I watch Lovhaug’s videos I elicit more of a reflective aspect of the Norman’s theory since I myself embrace that comic book culture. In turn, specific comics he talks about gives me funny story ideas (particularly since I write and draw parody) when facing writers block or better design layouts for my comic.

Left Above: Lewis Lovhaug host and creator of the series Atop the Fourth Wall

Right Above: A sample of bad artwork from Rob Liefeld from Lovhaug’s video.

Links

http://boagworld.com/design/emotional-design/

http://www.google.ca/imgres?imgurl=http://images.wikia.com/thatguywiththeglasses/images/7/71/Linkara.png&imgrefurl=http://thatguywiththeglasses.wikia.com/wiki/

http://atopfourthwall.blogspot.com/2011/02/spider-man-and-fantastic-four-in-brain.html

http://www.mailchimp.com/?pid=GAW&source=website&gclid=CKeE1PuTqacCFUVqKgodZGEsBg

http://www.youtube.com/user/mailchimp

Posted in Uncategorized | Leave a comment

Alan Funk Blog 2: MarkBaskinger’s Pencils Before Pixels

Mark Baskinger believes that hand drawing (i.e. pen and pencil sketching) is an essential tool for interface designers to become better visual problem solvers resulting in an easier transition into digital applications. All designers including those involved with interfacing should not worry about the perceived notion that drawings should be highly detailed and naturalistic. Instead, Baskinger suggests that drawings should be rendered quickly and simplistically in various compositions providing many alternatives to the problem. One of the best ways to communicate with an idea is to illustrate a sequential narrative of the user (portrayed as a simplistic graphic icon) interacting with a product in a specific understandable hierarchy. As long as the designer is exploring hand drawing persistently, the designer will gain confidence by figuring out what is the most important, relevant, and identifiable in communicating an idea to the client and the user.

Similar to Baskinger, Andrew Maier believes that storyboarding is useful in captivating a client’s interest in website ideation.  Maier emphasizes that designers need to look at the hierarchy in terms of the history of how a user processes a website.

http://www.uxbooth.com/blog/telling-your-websites-story-with-sketchboarding/

Besides clear communication, the designer must produce sketches that stimulate the client’s interest based on the playful interaction of the drawing medium itself.

For example, designers (such as the ones from Hanmail.net – a South Korean web mail service) could simulate navigation by folding or moving the sketches when the client touches a certain portion of the drawing.

http://www.youtube.com/watch?v=GrV2SZuRPv0&feature=player_embedded#

Unlike Baskinger, who believes that interface designers should be fairly well rounded (while not being labor intensive) in the sketching process, Joel Eden argues a much looser process called sketchiness. Eden argues that the fast generation of crude doodles offers flexibility in terms of not taking the critiques so personally on talent.  http://blogs.infragistics.com/blogs/ux/archive/2009/05/12/bill-buxton-sketching-versus-sketchiness-what-s-the-difference-for-ux-design.aspx However, when considering the exploration of rendering and mark making, the designer is more open to possibilities to visit or revisit ideas.

For example, Christopher Fahey takes a step further in his sketch process such as multilayered mark making on his drawings with different coloured markers or making a textured collage. Fahey’s process is not only immediate in delivery but also allows for some interactive storytelling such as his sketch for iphone apps.  Finally interface designers should catalogue their sketches to get immediate inspiration and or development such as Fahey’s sketchbook.http://www.slideshare.net/askrom/talking-about-sketching-about-interacting-presentation

In this interaction, a cause and effect is generated when a user (hand on the bottom) points to a drawn icon while the interface reacts to the changes (simulated by the designer folding or introducing a new page symbolized by the hand above).

http://www.youtube.com/watch?v=GrV2SZuRPv0&feature=player_embedded#

Fahey has a tree bark texture on the left for possible ideas for future projects.

http://www.slideshare.net/askrom/talking-about-sketching-about-interacting-presentation

Fahey will sometimes draw over photocopied mockup ideas to improve the features of a website.

http://www.slideshare.net/askrom/talking-about-sketching-about-interacting-presentation

Fahey illustrates an interactive narrative for an iphone app. He admitted to drawing the finger life size to represent loosely yet clearly a human interaction.

http://www.slideshare.net/askrom/talking-about-sketching-about-interacting-presentation

LINKS

http://www.uxbooth.com/blog/telling-your-websites-story-with-sketchboarding/

http://blogs.infragistics.com/blogs/ux/archive/2009/05/12/bill-buxton-sketching-versus-sketchiness-what-s-the-difference-for-ux-design.aspx

http://www.slideshare.net/askrom/talking-about-sketching-about-interacting-presentation

http://www.inspireux.com/2010/06/28/50-sketching-resources-for-user-experience-designers/

http://www.youtube.com/watch?v=GrV2SZuRPv0&feature=player_embedded#

Posted in Uncategorized | Leave a comment

Alan Funk Interface Blog 1-Good Design in the Digital Age

Richard Buchanan’s article “Good Design in the Digital Age” stresses the responsibility of the digital designer’ to immerse the user in an activity that provides a meaningful and comfortable experience. The most effective interface communication relies not only on a visual appealing layout and persuasive information but also on how the content provides a meaningful experience to the user. According to Buchanan, the essential components of good design are usefulness (providing content with an understandable purpose), usability (the ability to easily access and explore the potential aspects of the content) and desirability (the comfortable atmosphere of the content that the user can identify with). With the vast diversity in products and cultural niches in the marketplace, the designer must plan out a good balance of usefulness, usability, and desirability in order to effectively communicate to the user.

According to Buchanan’s article, one of the most essential components of good interaction is reliable navigation in interfaces such as websites. Vincent Flanders often exposes the flaws of confusing and structurally awkward websites. Flanders criticizes “mystery meat navigation” or the misleading hyperlinks to menu options that are disguised inside images or graphics. http://www.webpagesthatsuck.com/mysterymeatnavigation.html A perfect example of mystery meat navigation is on the Hermes website indicated on Figure 1 and 2 below. Similar to Buchanan, Alan Cooper argues that reliable navigation in a website will fulfill a user’s requirements regarding usability, usefulness, and desirability. However, Cooper believes that financial or business websites should limit or have no navigation needed when visiting a website. http://www.cooper.com/journal/2001/10/navigating_isnt_fun.html#more A perfect example of a good navigation in a website is CityMax with its clear typographic hierarchy and straightforward descriptions to tell users what the site is all about (see Figure 3).

 

Hermes Homepage

(1 Figure) In this homepage from Hermes, the user finds it difficult to navigate, as there is no clear indication where the menu bar is to start clicking on. There doesn’t even appear to a company logo for the user to feel sure that he or she is on the right site.

 

Hermes Navigation

Figure (2) Once the user clicks on a random image, there is still no indication of any menu options. On the left when the viewer clicks on the thin orange bar with a question mark on top where the menu finally appears. Furthermore, the user cannot read the menu with its overlapping animation, poor choice of typeface and transparent colour contrast.

 

 

CityMax Homepage

 

Figure (3) There is very little scrolling on the homepage of the CityMax website. The identifiable logo, contrasting headings, and well-organized imagery allow the user to navigate easily. CityMax won the web awards from the Web Marketing Association for Outstanding Achievement in Website Development in 2008 and 2009. http://en.wikipedia.org/wiki/CityMax

http://www.citymax.com/

http://www.cooper.com/journal/2001/10/navigating_isnt_fun.html#more

http://www.webpagesthatsuck.com/mysterymeatnavigation.html

http://www.webpagesthatsuck.com/worst-business-web-sites-to-navigate-in-2009.html

http://lesailes.hermes.com/us/en/

http://en.wikipedia.org/wiki/CityMax

 

Posted in Uncategorized | Leave a comment