You are on page 1of 33

Unit 8 Example 1

COGNITIVE-AFFECTIVE DESIGN CONSIDERATIONS ANALYSIS
Human cognitive factors are mandatory to take into consideration for affective web design. The
perception cognitive factor could make or break a web application if it creates an emotion of
frustration or anger. If the perception is to retrieve the sought after information immediately only
to learn that the web application let the user down and was not successful in obtaining the
information she set out to obtain would be very frustrating. As Donald Norman stated in an
interview, “the failure of a system image to communicate the designer’s intention to the end user
produces a flawed mental model that almost always has negative implications” (Zachry, 2005, p.
470). This will lead to anger and frustration and ultimately the visitor will leave the web
application not to return and worse could inform others via social media that a particular web
application is useless and not to waste your time in visiting. This in itself could break the bank for
the company could possibly fail in business as a whole. The Samsung website creates an
attractive, eye catching web application that lures its visitors in to take a look at the products
and applications they have to offer the consumers. Samsung specifically has made sure that the
webpages all provide for an exciting and pleasurable experience in visiting its site. In fact,
looking at the photographs of people on most of their embedded navigation links all contain
people smiling or dancing to music or some other positive generating feeling towards its visitors.
Specifically informing its audience that Samsung can give you the best in technology with a lot of
new exciting features to look for.
Another cognitive factor to consider would be the ability to keep the visitor’s attention. Most
people have a very short attention span (Zachry, 2005), which means that the average user does
not want a lot of fluff once they land on a page. They want to be able to obtain their sought after
information within seconds of entering the web application for they do not want to spend a lot of
time reading text to find what they are looking for. (Zachry, 2005). In order to make an affective
design for users with a short attention span, it is necessary to keep web applications brief with
images and little text but enough to get the point across for each element found on each page in
a matter of seconds. The Samsung website has done an excellent job in meeting this affective
design goal for they have used the top half of their home page to be the most important with a
scrolling banner with various options to pursue in addition to four attractive photograph squares
offering additional Samsung information the visitor may be interested in. The way these objects
are organized, gives a positive feeling in that it gives evidence that Samsung is a big company
and runs its business in an organized fashion. Even if Samsung is not organized behind the
scenes, the website application says otherwise. The images, text, video and other interactive
activities on the Samsung website are great methods to keep the visitor’s attention as well as
keeping them on the site.
Learnability is another cognitive factor necessary to take into consideration with regard to an
affective design. Learnability is important because you want to make the web application easy to
use and easy to remember how to use for the end user will not get frustrated if they have to
learn how to use the website all over again from the previous visit. It is also recommended to
make learning fun as stated by Donald Norman and even a bit humorous. (Zachry, 2005). Not
only will it make the visit a fun, positive, and pleasurable experience it will assist the end user in

remembering a lot more. The Samsung website uses consistency in the placement of its
navigation tools as well as a unique tab with a text tip “Samsung in Depth” with three lines
underneath of it reflecting a swipe icon, so the user immediately understands to click on it and
an additional navigational menu appears. By using familiar icons is an excellent way to meet the
“learnability” usability goal.
TASK ANALYSIS
To provide an understanding of a task analysis, it is important to first understand just what is a
task. According to Benyon (2005, p. 505), “a task is a structured set of activities required, used,
or believed to be necessary by an agent to achieve a goal using a particular technology.” Task
analysis is taking a look at the ultimate goal and analyzing the activities (tasks) necessary to get
to the goal or to complete the goal (Benyon). In an effort to demonstrate a brief task analysis in
action, the following three interaction activities on the Samsung website will provide an
informational step-by-step review of how one can accomplish the goal the user sets out to
complete. Additionally, each interaction activity will also offer usability improvement
considerations, if any.
Navigate to Samsung’s Green Guide
On home page, to the right of the scrolling banner, there are four squares of interaction activity
available. You will then need to click on the square with the picture of Earth and also entitled,
“Samsung’s Green Guide.
This will bring up a page of additional interactive options to choose from regarding “protect,”
“conserve” and “renew.”
If one is interested in locating a location to drop off old electronics for example, you would click
on option 3 “Renew” which the word in itself may not be enough to tell the end user what
“renew” means, so Samsung also offered a brief description under this navigation button to give
additional information.
Click on “Renew”
This brings up section on the page discussing Renew as well as an interaction activity to enter
your zip code to determine the closest drop off location.
Enter Zip Code
Click “Go”
Comes up with a “Please enter a valid Zip Code error message and asking you to click ok.
Click Ok
Enter same zip code again
Comes up with Locations webpage external to Samsung’s website asking for zip code information
again
Entered zip code again and clicked “Search” button, which also has an additional green arrow
pointing right as if it means to navigate
It seems nothing happens, but then realize that the results have populated at the bottom of the
screen with a great deal of white space between search functionality and results – it requires a
scroll to see the results. This is bad design in the fact that it appeared the results did not come
up, but suddenly notice scrollbar appear to the right of the webpage which leads the curious user
as to why a scrollbar would appear for an empty result page.
The results are nowhere close to Minnesota with available locations as New York, Michigan and
eastern Wisconsin. The results also are poorly designed for table can only two lines of results at
a time which requires you to scroll in the table both vertically and horizontally. There could be

additional effective and efficient designing methods applied here. Because of this bad design, the
usability goals have not been met in this area.
No navigation available to get back to original Samsung’s Green Guide without clicking on left
arrow of Internet browser
Upon landing back on original requested Green Guide webpage, chose different interaction
hyperlink entitled, “900 fixed drop-off locations” to see if the interaction activity would be
different. Click on this hyperlink.
Brings up webpage on Samsung’s website with map with red arrows of Samsung locations
available for drop off, with “enter your Zip code” field for entry with a search button.
Entered 55033 and clicked Search
Error message comes up with “No locations found please change your zip code and try again.”
This could be improved if there are no Minnesota locations, then there should be information
stated somewhere that this searching is only available for the states of Wisconsin, Michigan and
New York.
Additional improvement comments is the usability goal of learnability, consistency is necessary.
Upon reaching the Locations page for electronic disposal drop off locations, the page wherein it
did stay on the Samsung’s site, the navigational tabs located horizontally across the top are
located in different locations. For example, the icon to take the user to the home page by clicking
on the SAMSUNG icon is now located in the middle of the page, instead of being the first icon
available for clicking on.
Register a New Phone Device
Click on “Login” for this will personalize the web page to the end user’s registered devices
Click on “Log In Here”
Enter login credentials and click “Login:
Click on device image matching user’s device
On the Samsung Galaxy S 4 webpage, click on “Support” button
Click on “Register Now”
This brings up “Complete your Registration” webpage with fields to be filled in to provide support
for this specific phone
Fill in first field – HEX/IMEI number and purchase date. Now it is necessary to remove the back
from the back of the phone in order to obtain this number. Webpage demonstrates with
photograph where to find this number. It would have been more end user friendly if the design
would have included the IMEI number instructions to get to it from the phone located in its
general developer settings on the phone rather than having to take phone apart. This number
was found in the developer settings,
Take the battery out of the phone.
Type in the IMEI number into specific field
Put battery back in the phone
Put cover back on the phone
Turn phone back on
Fill in “Purchase Date”
Fill in Purchase “Store Information”
Fill in contact information.
Answer optional questions such as what influenced purchase, how would you rate Samsung
products overall and how did you find this product registration page? This gives evidence that
Samsung is requesting feedback information for future webpage development.
Click on “Submit.”

2006). one would expect to see two devices listed. With navigation hyperlinks. Pop-up window appears “Global Download Center” with Samsung’s disclaimer regarding the download of such document. the site will become frustrating and hard to use – which would not meet the efficiency usability goal. 2006). Without good navigation. he or she would look at the page number and turn to that page.” Once registered it now offers “quick links” to things like Downloads. This will leave to a great deal of frustration for the end user. (Webster and Ahuja. Request Service as well as available accessories for purchase.This brings up another webpage confirming registration to your account Click on “Continue to my Account. The PDF is now available and opens directly in Internet browser. This gives evidence to show how Samsung has created relations between registration and sales. which makes the end user to download it once more in order to save it to one’s hard drive. This shows good physical design in that different languages were taken into account. tells the reader where they are at. (Webster and Ahuja. NAVIGATION EXPLANATION Navigation design in a web application is very important. However once submitting second device. This shows more than one group is affected by this design and each group would have input into this webpage design. Click “Send” – Using the word “send” is confusing for the user because it would be logical to see the word “Save” rather than “Send. Page numbers. which could bring up questions to the reliability of Samsung in itself. there are cues that tell the reader where they are. Live Chat.” By using the word “Send” it leads the user to believe that they will now get an e-mail option to send the manual to themselves. first device previously added will get deleted. Download Android Smartphone User Manual Click on “Login” for this will personalize the web page to the end user’s registered devices Click on “Log In Here” Enter login credentials and click “Login: Click on device image matching user’s device Scroll down on page to “For Owners” section which is located near the bottom Click on “Owner’s Manual to download the PDF of the manual Brings up another webpage – this can be confusing because the user would expect that the PDF window would come up to be saved to end user’s computer hard drive. graphics. If the reader wants to go to another page. Or look in the index to determine what page they want to go to. A bad design observation is when a user enters a Samsung device such as a Samsung Note 10. Jane Webster and Jaspreet Ahuja said it best when they informed when someone reads a book. Click on drop-down under “Manuals” section and choose English(North America) or Spanish(North America) PDF selection.0 and then adds another device to your account. Therefore a good navigation system is critical for it specifically assists the visitor in painting a mental picture as to where the navigation tool should take them . text as well as the physical placement of the reader’s hands within the pages of the book. In addition to once activated and new page comes up will it provide bread crumbs to inform the reader where they are at and give a method to get back to where they were. the reader has no idea where the hyperlink will take them. which is what was expected in #6 above.

which is deemed to be the most important location to give the user an immediate mental picture of where they’re at and if it met their mental model expectation. (Webster and Ahuja. 2007). there are three classes of navigation tasks: “Object Identification Exploration. which gives the user the ability to quickly retrieve the information the user set out to find. by clicking on “Shop Products | All Products | Computing | Laptops” the page will appear with a picture of a laptop on the top of the page. which according to Webster and Ahuja is an attribute found in the usability guidelines “developed by the HCI community” (Webster and Ahuja. At the bottom of the homepage for example. it is important to understand the different types of navigation systems. Samsung also uses breadcrumbs and other “you are here” information techniques to inform the user where they are at in the environment as a whole. With regard to “wayfinding. also has text to give additional information to what the photograph may be displaying. (Morville and Rosenfeld. Each of these systems are made up with various web elements matching the required navigation metrics for that particular page. p. 611 and 612) point out. the web application uses drop-down methods off of the main navigation links found in the important top quadrant in an effort to offer more pages to visit without taking up valuable white space. Samsung provides embedded hyperlink photos which give the visitor an idea where they will go once they select that area to travel to.before they even click on it. Exploration is an understanding of the web application in its entirety as well as understanding each page individually and how it is related to the web application. they could look at the bottom of the homepage or any page for the black background section with the site map. Wayfinding means drilling down to the very objective the visitor set out to find by using the available web application. Additionally the guidelines discuss the ability to move forward and to return back to homepage with consistently located navigation tools is also important. Each embedded link found on a photograph. because it is consistently located on every page. For example. if the user did not know what Samsung manufacturers. which is another cognitivieaffective design feature. In addition. which in turn will “engage” the user and keep their attention. The Samsung website does just this with the Samsung Logo. which will take you back to the homepage no matter where the visitor has travelled to. the user intends to look up product information for a new laptop. and Wayfinding. they give a visual representation of the web application. (Webster and Ahuja. a good navigation system will not “disorientate” the visitor. As Benyon. These types are: .” Samsung has grouped together all their pages into logical sections. Turner. and Turner (2005. 2006). 669). The Samsung website has touched upon each of these navigation classes by the multiple types of navigation tools available to its end user. which ultimately will lead to “future” use of the web application. Furthermore. 2006. Additionally. The Samsung web application uses a variety of navigation tools. the user will have some clue as to where they will end up. 2006). pp. For example. 669). they could quickly see without leaving the page they are to obtain the information they set out to find. More importantly.” Object identification is exactly what it sounds – to figuring out each object and what it will do. This too meets the usability guideline in “providing self-explanatory labels on the navigation system” (p.

” which upon retrieving it from the Samsung Business Solutions webpage page. Upon entering Samsung’s homepage. 2011. they offer a drop-down to local categories based off of the global navigation system. For example. which would also be considered the global navigation type.Global Local Contextual (p. an analogy to an Internet page with a lot of information would be similar to a large forest with interesting attractions for the visitors to try to navigate to and then find their way back to their car once again. Regarding “contextual” navigational tools. 2007). 2007). One may think of a local navigation tool as a means to get to a secondary page or level within the web application. Samsung’s Organizational Layout Samsung has done just that. This webpage is considered as standing on its own. it will bring up an entirely different page format and layout. by clicking on Hope For Children under the “In the Community” information side bar. which gives evidence that it is a “contextual” type of navigation system tool used. 116). the Samsung web application offers a community assistance program entitled. The local navigation system usually compliments the global navigation system (Morville and Rosenfield. and some of this research has shown that “visitors can judge a page in under a second” (Duckett. specifically making the application an enjoyable interaction experience for the end user. Additionally. As Benyon (2005. p. you will see four main navigational subjects with drop-down options for additional information as well as placing the 6 most important products that Samsung wants the visitor to see immediately upon landing on their page in a scrolling banner with a unique tab (resembling a file folder tab) with additional . there has been a lot of research with regard to usability factors. 379) so it is critical for webpage design to aim for the most important stuff to be located at the top of the page without scrolling. which ultimately leads to big business for the company who designed the application. the location of the global navigational links on the “Hope for Children” page does not give an easy way to get back onto the Samsung main web application without hitting the “back” key which can create confusion for the user which does not meet the usability goals of efficiency and learning. however. it specifically means a tertiary source level for the visitor to choose – especially if the page does not fit the global or local navigation system methods (Morville and Rosenfeld. “Samsung Hope for Children. On the Samsung’s website. You do not want it to be cluttered and all space should promote ease of use for the end user. so the organizational layout is very important to the design of a web page. ORGANIZATIONAL LAYOUT ANALYSIS Why is organizational layout important to the design of a web application? It is important because the designer needs to meet all usability goals. These local navigation tools are enhancements for Samsung’s global system because they too are available on every page. 565) points out. The global navigation system is the most important navigation tools for the web application. It is understandable that not everything can be fit onto one page (Benyon. Samsung has done this with the hyperlinks located at the top for they are consistently found at the top just under the blue bar for every page. p. 2005). Additionally the site map is found on every page as well. a local navigation tool provides the visitor with a choice between specific categories or objects he or she would like to learn more about. Additionally.

By maintaining consistency. Energy Star Award recipient information.” “Our Values. they have the sections grouped by “Values & Philosophy. the main navigational links are located in the same location as well as the “Login | Help with my order | Cart” and Searching tools. Samsung is meeting the usability goals in “helping people access. 65). Click on “Values and Philosophy” under the Samsung Group brings up a photograph of what appears to be a “meeting of the minds” of Samsung employees regarding a business pie chart. Then to the left of the photograph and the “Values and Philosophy” section. but important enough to have a hyperlink in first important quadrant of the homepage. In addition the same color and balancing of page objects are similar to other pages after drilling down from homepage.” In order to see all of these sections. learn and remember the system . Photographs are placed in exactly the same location and the “Tweet.1 Tablet Click on “Get Support” from homepage navigation hyperlink located at the top of the page. but yet found an innovative way to get a lot of pages in one small space and all evenly balanced.interactive activities. Samsung has clearly done its homework in understanding the “less clutter” rule. Once there. Therefore. In searching for the Galaxy Note 10. Additionally it offers a searching option with the all familiar icon of the magnifying glass representing to run a search function. and tv and movie experience available on Samsung devices. This page is the same as the homepage in that the placement of the “News | About Samsung” is located in the blue bar at the top of the webpage. .1 16GB model. Samsung Support Owners Product Page for Support Video for Galaxy 10.” It invites the user to read on to learn more about Samsung. Samsung’s homepage also contains additional interactive items available in the top-most important quadrant which also does not require scrolling.” “Sustainability.” (Benyon. Above this section located on the blue bar located horizontally across the page are two navigational hyperlinks to obtain information about Samsung as well as any news press items regarding Samsung.” Facebook “Like” and “Google +1” activities are also located in the exact same location as each page.” and “Vision 2020. In addition to placing four interactive squares with embedded photograph hyperlinks regarding apps for Samsung’s smart TV. the use of the scrollbar is important. p. “Help With My Order” hyperlink and the “Cart” hyperlink.” “Samsung Electronics. Scroll until you find the model that .” “FAQs. About Samsung / Values and Philosophy Page Click on “About Samsung” from blue bar hyperlink at the top of the homepage. the first half of the homepage Samsung sees as the most important objects for the visitor to interact with for as Duckett pointed out. brings up an attractive photograph of a SAMSUNG display booth with the words “Welcome to Samsung. Samsung’s Green Guide. there is an interactive search box for the visitor to enter the model number or name of the device they are trying to obtain support for.” and “How-To Guides.” “Government. 2005.” “The Samsung Philosophy. in a smaller font which is the Login hyperlink. click on “Find Product Support.” which brings up a page informing of how to get support quickly with the top three activities Samsung believes visitors will be after such as “Downloads.” Immediately underneath this section. hyperlinks are available for navigation tools to other Samsung company entity information as well as “Careers. . visitors will know within seconds if this page meets the satisfaction of the end user and keeps the user on the web application. with the exception of the homepage. Beneath this photograph.” and “Samsung Group” sections that a stakeholder may find very important but the general consumer may not find as interesting – thus why the “About Samsung” information is located on its own page. begin typing Galaxy and a dropdown list of available models matching Galaxy will be listed.” “In the Community.” “Investor Relations.

this brings up a new page with all the information specifically related to the Galaxy Note 10. a picture of a television with familiar icons for Skype. Hulu Plus. In an effort to provide a descriptive evaluation of usability factors for the Samsung website. Once you have maneuvered to this page. All are a method in capturing the attention of the visitor. 18). a television screen with a familiar video playback icon entitled. Under these items. there are 5 additional hyperlinks that are television related with icons representing each hyperlink such as “Getting Started” with the word “Register” on the little computer monitor screen. The usability goals are more than just being effective or efficient.” Main navigational tools and other homepage objects are placed in the same location. Everything else is consistent with the homepage. “Explore Apps for your Samsung Smart TV. USABILITY EVALUATION In any design project. Just what are the usable goals one must achieve? They are goals that are specific to the task at hand and the “user experience goals” (Rogers. the page has in big bold letters “Getting Started is Easy” with a side view of a television screen with various icons flying around the television object.1 tablet. which has the consistent Samsung page layout as most of its web application. next a television screen with photographs of hand swiping for Samsung SwipeIt app. which is quite attractive – especially if one is looking to start downloading applications for their new television. access the . This layout seems a bit overwhelming in that the visitor needs to do a lot of scrolling and reading to determine exactly what is all available on this page. The social media activities have been moved slightly to the left with a new button for the visitor to click on entitled. The layout is almost identical to the other pages. “Browse Samsung Apps. p. carry out their work efficiently. Appstore Page Click on the top left-hand square to the right of the scrolling banner entitled. 19 – 21) will be analyzed: “Is the product capable of allowing people to learn.” and a computer screen with a picture of a wrench/screw driver on the screen to represent how to get support. 2011. enjoyable experience as well as not to give frustration in having to learn something more than once and be so familiar that the end user does not have to spend much time in learning how to interact with it immediately out of the box. one will need to scroll all the way to the bottom wherein it states “Get Smart” and informs that this is the section that will have tips and article information in which the visitor must click on the “Learn More” hyperlink.” This brings up the “Appstore” page. however. which is different than the “Values and Philosophy” page. This brings up the “Articles” page with approximately 6 sections for interactive activities. there is a large photograph that takes up the page completely horizontally. which has met the usability goals in learnability. Sharp. these goals must give way to a pleasurable. NBC logo and a television screen with what appears to be channels/applications. Under these navigation tools. and Preece.matches your device. an additional social hyperlink activity “Pin it” has now appeared in the list of social media options. a usability evaluation is not an activity to be ignored. Underneath the photograph. The information learned from a usability evaluation is valuable and will almost always lead to success of the project at hand. which is a cognitive-affective design for the colors are exciting and inviting. “Amazon Instant Video. The layout of the grouped sections has changed completely for there are many more grouped sections available to review and each section now contains its own navigational tools. the following questions provided by Rogers. Sharp and Preece (pp.

it gives the specifications for the phone. blue and white colors. “Is it possible for the user to work out how to use the product by exploring the interface and trying out certain actions? How hard will it be to learn the whole set of functions in this way?” Answer – Learnability has been met. especially for products and operations they use infrequently?” . There was a “X” to close the error-message window. Additionally additional product details as well as featured accessories all appear quickly for the end user to review. Additionally. Viewing this application from a utility point of view. which gives a positive feeling as well as a overall view of the entire application as a whole by using the global navigation features. “Does the product provide an appropriate set of functions that will enable users to carry out all their tasks in the way they want to do them?” Answer – Same as # 3 above. can they sustain a high level of productivity?” Answer – Very efficient. The combination of how each usability goal carefully intertwined in the workings of the web application. The number of tasks it takes to get to the information sought after is minimal. Samsung’s ability to set up its global navigation system and other consistent factors makes the web application easy to use within the first couple of minutes of visiting the site. For example. with the exception of the “Renewable” resource listed above. or buy the goods they want?” Answer – Yes the effectiveness goal has been met. one could just add a text tip to inform of the states in a small font of the states that are accepting recycled Samsung products. The response will be confusing to the end user for one immediately thinks the application is not working properly when it informs that is an invalid zip code. makes it do exactly what it is supposed to or at least meets the users’ expectations. makes the site attractive and inviting to its visitors. available colors and stores that have the phone for purchase. Specifically dealing with the Samsung’s Green Guide wherein the end user can choose the “Renew” path to give drop-off locations for electronics to be recycled to learn that you cannot enter a Minnesota zip code. therefore keeps kicking off same error message “you have entered an invalid zip code” which leads the end user to believe that it is the format rather than the actual zip code entered. and bright colors for the product photographs. To improve upon this without a lot of program code updates. “What kinds of interface support have been provided to help users remember how to carry out tasks. Samsung’s homepage shows a photograph of the new phone as the first slide of a scrolling banner with built-in navigation to the Galaxy S 4 page. but does have the global navigation system to navigate back to the homepage.information they need. They also put the most important and most popular search criteria at the top of its homepage – no scrolling required. So there is some learning involved in this segment. “Once users have learned how to use a product to carry out their tasks. the use of white space. However. if a user is interested in obtaining information about the new Samsung Galaxy S4 for a future purchase decision. the home icon is now located in the middle of the page rather than the most left-hand icon which is the location on all of the other pages. “What is the range of errors that are possible using the product and what measures are there to permit users to recover easily from them?” Answer – Safety or undesirable results could have been handled differently. Immediately when the page comes up. Samsung set out to make its web application easy to use as well as easy to remember how to use by keeping tasks simple. The evidence is in Samsung’s organized web application and how they organized their pages into a logical set of related-task groups with the appropriate navigation tools found in each group to take the user to its intended target quickly. the application is lacking code to prevent the user from entering a zip code outside of the drop-off locations. There is nothing in place informing the user that there are only certain states available.

The benefit of establishing heuristics guidelines for a specific design is the fact that they have been “put to the test” in the industry and provides information as to what works and why they work well. a picture of a shopping cart for shopping/checking out the purchase. Video playback uses standard video VCR functionality. HEURISTIC USABILITY EVALUATION As Jakob Nielsen points out. Samsung also offers a “Login” feature which once logged in will show the devices that the visitor has registered. The web application also offers a searching mechanism at the top of the homepage for purposes of assisting the expert user in locating information quickly. The Saumsung web application will be analyzed with 8 of the 10 goals as developed by Jakob Nielsen listed below: Match between system and the real world Familiar icons and text phrases similar to everyday tasks are found on Samsung’s web application. Flexibility and efficiency of use Samsung uses a site map at the bottom of every page. It is located in three locations. if the end user wants to review a “how-to” video for the use of a Samsung tablet. Additionally they have labeled various image objects with tip text to assist with navigation information. This is evidenced by the consistent location of the global navigation system as well as the use of familiar-looking icons to perform various interactive activities such as the magnifying glass for searching. Two would be suffice in this area and would give back valuable white space. For example. 1995). or accessory options related to that specific product. Specifically text phrases like “FAQs” or the magnifying glass icon representing to search or the shopping cart icon. they include “Live Chat” under every image and also include “Live Chat to the right in a navigational section informing of the same “Live Chat. For every product. provides manual. Consistency and standards The navigational system is consistently located across the entire web application. support. the icon not only shows a picture of the tablet but it also states beneath the picture a text box informing that this video is for a tablet and also included above that is additional text regarding the video and how it will tell you how to use your tablet. and options visible” (Nielsen. (Nielsen. actions. Samsung also uses labels along with images with embedded navigation to make certain the user understands where the hyperlink will take her.Answer – Memorability usability goals have been met. as well as the social media icons for combining the Samsung experience with the pleasures of using social media. On the same page as the user’s device. . Heuristics are the best practices to follow when designing interaction products rather than specifically usability guidelines. Aesthetic and minimalist design Improvement suggestion regarding the product support video options would be to reduce the amount of interaction information for a support video. Additional suggestions to gain visibility for other objects is to delete the irrelevant information that deals with the amount of information Samsung chooses to use in contacting Samsung for assistance. Recognition rather than recall Samsung has done a great job in “making objects. 1995) in a strategic manner so as not to appear cluttered and used white space intelligently.” Visibility of system status The hovering ability available over the global navigation system is a great visibility method. which assists the expert user to quickly navigate to sought after page.

register your devices. Morville. Makes it easy to remember how to use the site without having to learn a great deal before use. It could mean that the format of the way the user entered the zip code is wrong or it could mean that the zip code is not found in the correct state. and Turner. (2007). References Benyon. contexts. Without logging in. the web application keeps track of the devices the visitor has reviewed during that specific visit. Turner. Duckett. By using this wizard type step by step. makes it easy for the user to complete the task they set out to do. Without additional text. activities. Help and documentation Provides a method to begin searching help and documentation for your specific device based form the model number or name so you can bypass all the non-related help documentation that does not pertain to visitor. S. Sebastopol: O’Reilly Media. Information architecture for the world wide web. it appears to be an error.. third edition. Indianapolis: John Wiley & Sons. Inc. P. Designing interactive systems: people. (2011). HTML & CSS design and build websites. Inc. but when logged in as a member. technologies. J. (2005). the web application keeps track of recently reviewed devices and offers immediate feedback with regard to new accessories available as well as any other related offers for those specific devices reviewed. London: Pearson Education Limited. it will not remember previous visits.The ability to create an account. Provides tip labels for embedded images to make sure the visitor knows where they will navigate too by clicking on the various photographs. and Rosenfeld. Additionally. Provides a “hand holding” method when a visitor undertakes the task of registering his or her device. and then receiving an email regarding your device and what is new or if any upgrades are necessary is outstanding from a visibility system viewpoint.. When the message keeps repeating itself without telling you why other than “that is an invalid zip code” will confuse the visitor in understanding what that means. P. D. Error prevention An error prevention suggestion would be especially useful on the Renewable page in entering zip code information for local drop off locations. . L.

469-487.com/articles/ten-usability-heuristics/ Rogers. (2011). J. Sussex: John Wiley & Sons Ltd. kayak. (1995). Norman. Retrieved from: http://www. KAYAK also provides users with information about special travel deals and vacation packages that all appeal to the interests of . (2006). Enhancing the design of web navigation systems: The influence of user disorientation on engagement and performance. S. An Interview With Donald A. Hl and Preece. (2005). KAYAK provides information that pertains to traveling. doi:10. 30(3)..com is a search website that is similar to Travelocity. Technical Communication Quarterly. MIS Quarterly. HotWire and Expedia. 14(4).1207/s15427625tcq1404_5 Unit 8 Example 2 This purpose of this work is to present a website usability analysis for the www. Y. Orbitz. Sharp.Nielsen. Zachry.nngroup. J. including information about hotel accommodations and car rentals and outgoing flights.com website..kayak. Interaction design beyond human-computer interaction third edition. Webster. M. J. J. 10 usability heuristics for user interface design. 661-678. & Ahuja.

affective qualities are those that involve emotions.travelers. or even to an individual element on a page Websites should be designed so that they draw a visitor’s focus to a key component or element on a page. KAYAK does this very effectively by making good use of colors.. Cognitive-Affective Design Cognitive-affective design refers to the use of both cognitive and affective principles in the design of a human-computer interface (HCI). remember. contrasts and boxes for entering text. moods. Sharp & Preece. KAYAK’s simple design makes it easy to draw a visitor’s attention to points its designers obviously want them to eventually interact with. page layout and content analyses. learn and react (Rogers. this paper will include a discussion of the following topics for the KAYAK website: its cognitive-affective design. ‘Cars’). 2013). the navigation types used by the site and the theories behind their implementation. Perception This factor enables information to be acquired and recognized . feelings and attitudes (Ping. Once visitors arrive at the Home page. Both aspects are equally important for inspiring interaction in HCI designs because humans reason and feel. Cognitive Factors Attention This is the cognitive factor that draws visual or auditory focus to a web page. a task analysis.com website. and entering search relatively straightforward criteria for the topic. a usability evaluation and a usability heuristics evaluation. A. perceive. Website Usability Analysis I.g. part of a web page. While cognitive elements impact the way people think. they use the site by selecting a broad topic of interest from the navigation menu at the top of the page (e. The following sub-section provides brief definitions of the cognitive factors and affective qualities and describes how they are at work on the www. 2011). Broadly speaking. The latter two usability evaluations are distinct from one another and evaluate different sets of criteria.kayak.

Furthermore. KAYAK incorporates all of these factors. Chunking – grouping similar elements together into easier-to-remember chunks – is another example that aids retention and recall. buttons and menu items) and boxes to enter text. drop-down list of possible words typed in by users – is a memory triggering mechanism that facilitates the recall of familiar information. clickable elements (e. KAYAK facilitates perception through its use of colors and contrasts on its site. Learning Learning refers to the ease with which a human can understand and use a human-computer interface . dynamic search – which results in an alphabetized. The ‘From’ and ‘To’ text boxes are grouped at the top of the main section on each page and include lists of destinations that dynamically drop down and change as the user enters consecutive letters. then the ‘Direct Flights’ link) provides information about direct flights laid out in a grid pattern consisting of rows and columns. Its main navigation menu. Furthermore. For example. then ‘More’. The ‘Depart’ and ‘Return’ boxes include prepopulated date formats to make it easier for visitors to remember what format to use as they enter travel dates. Memory This involves the retention and recall of information It is somewhat paradoxical that no one can function without the cognitive factor of memory. clicking in either date field results in a pop-up calendar in an easy-to-read and perceive format.Distinguishing elements on a page allow visitors to recognize them and perceive how they might be used. with each section using easily-perceptible elements. The site encourages the quick recognition of various elements. The ‘Direct Flights’ listing (found by clicking the right arrow on the top navigation menu.. This kind of layout makes it easy to recognize and differentiate information types. Similar to the cognitive factor of attention. includes five chunks of words that are all related to travel. good website designs aid memory using several innovative techniques. color gradients. the main parts of the Home page are partitioned into two columns. like buttons made of different. for example. yet the most effective websites are those that do not actively foster or promote information recall. A third example that aids recall involves the consistent placement of similar objects on a page. like its distinctive company logo.g. like navigation menus placed at the top of a website. Instead. yet similar.

Websites that are properly structured facilitate learning. Travelocity. Orbitz and Expedia.g. its layout and structure make it easy to learn and understand the content and how to best utilize the site. KAYAK’s design is very simple. As noted at this paper’s outset. Mental Models This refers to the way people expect a human-computer interface to work. affective design qualities include beauty.com website is conducive to quick snippets of data entry are the several travel-related websites that were created long before KAYAK. brightness. based on prior experience with similar objects used in the past. e. As a result. As another example. Further solidifying the notion that the mental model of the www. and how they might expect to engage with it. From newspapers to airports. this type of format contributes to the mental model in which people find travel information by using concise bits of information to retrieve search results. after clicking on the ‘Deals’ link on the top navigation menu. All of these ideas are important when planning the design of a human-computer interface because they all have an impact on the way users interact with them and respond. Although KAYAK is not a complex website from a user’s perspective. and instill feelings such as happiness. numbers or acronyms to derive results. Interactive calendars. Affective Design As Ping (2013) observably notes. Similarly. offer a graphical representation of dates in the familiar form of a calendar. The mental model of the KAYAK website is based on precisely this concept – mainly the entry of one or two words. color. The ‘Deals’ page.. Thus.. the right-hand column shows images and travel information about various destinations. affect also consists of moods and attitudes. for example. As noted earlier. trust and motivation to elicit a response (Ping. These popular travel websites are all based on the same concept in which users enter concise information or click on a link to get travel results. the drop-down search menus and pop-up calendars) motivate users to click on a link to get a result. Its simplicity combined with its use of text boxes elicits a desire to want to enter information into the boxes to find out what kind of search results they produce. but affect is much broader than that. ‘Interests’ and ‘Popular’ topics (see ‘Deals’ page) elicits user . 2013).g.kayak. people have been accustomed for many decades to viewing travel related information in a condensed picture/brief description/price-type of format. images. for example. provides a list of hyperlinks that also make it easy for users to click. This combined format helps users assimilate information about travel destinations and is easier to understand than pure text alone. menus. the idea that a single click action is all that is necessary to get search results for a brief list of inviting ‘Destinations’. affect-related phenomena include emotions and feelings as two components. Moreover. simplicity and classical. and from cars to hotels. B. the dynamic features of the site (e.

Cognitive-Affective Design Interactions While the foregoing discussion attempted to address the cognitive and affective principles of design in isolation for conceptual and explanatory purposes. The grouping (chunking) if these columns into lists of similar concepts aids memory in that users do not need to think of destinations on their own (which requires the mental work of thought). The just-discussed ‘Deals’ page. Primary Task Find inexpensive round-trip. It is “hierarchical” in that tasks are subdivided into subtasks. ‘Romantic’ and ‘Cancun’). ‘Caribbean’. These aid attention and perception. Sharp & Preece. Finally.g. it is easy to see the cognitive-affective design principles at work throughout the KAYAK website. OR” from the drop-down list In the ‘To’ text box. The most common (yet quite controversial) form is hierarchical task analysis (Rogers. ‘Island’.interaction because they are simple and evoke positive feelings and moods (e. C. type “sa” and select “San Diego. for the reasons discussed in the previous section. for example includes all of these elements. II. and another for a tertiary task: 1. 2011). one for a secondary task. affective principles are at work right alongside the cognitive factors. click on the ‘Round-trip’ button In the ‘From’ text box. First. ‘Hawaii’. OR to San Diego. type “po” and select “Portland. it is difficult to separate the two principles. The images and brief descriptions under the ‘Featured Deals’ facilitates easy learning and is consistent with the mental model of a concise travel website.3 days’ button Enter a ‘Depart’ date and a ‘Return’ date Select ‘Anytime’ for the ‘Depart’ and ‘Return’ date times Select ‘1 adult’ . which people have experienced for many years. Discussed below are three hierarchical task analyses on the KAYAK website – one for a primary task. CA From the Home (‘Flights’) page. non-stop airline ticket from Portland. its three-columns direct the user’s focus because of the clean and simple columnar design and blue colored links. CA” from the drop-down list Click on the ‘Make my dates flexible’ link Click on the ‘+/.. Task Analysis Task analysis involves an examination of tasks that can be achieved in reference to a website’s current design. From a broader perspective.

shown in three columns. hotels are not presented in a grid layout-type of format.g. however. click on the ‘Hotels’ menu item at the top of the page In the ‘Where’ text box. however. One might argue that there is so much information. the extensive use of arrow-sliders and checkboxes. type “sa” and select “San Diego. Unlike for flights. The map displayed in the top left-hand corner of the search results is very helpful because it shows the general location of the hotels in the city (e. KAYAK’ section Click the ‘Find Flights’ button to get search results The search results. or more. plus the different colored flight dates and prices alleviate the feeling of being overwhelmed somewhat because these design features have an affective result. The other criteria listed in the left-most column of the search results provide useful information as well because it allows the searcher to focus in on a specific aspect of a hotel. the search results for hotels are displayed in three distinct columns. especially in that it shows price comparisons from other travel sites and an image of the hotel. provide a plethora of information.. north. south or east). A listing of eight. the colored sections.Select ‘Economy’ from the drop-down list Click the ‘nonstops only’ check box Uncheck any checked boxes in the ‘Choose Sites to Compare vs. it seems confusing. Secondary Task Find reasonably priced hotel for planned trip to San Diego. The right-most column lists advertisements. Tertiary Task . 2. ads seems more than redundant. so the screen space could be better utilized by omitting this column and using an alternative format instead. a grid layout of search results is not typical when searching for hotels. KAYAK’ section Click the ‘Find Hotels’ button Similar to the search results for the primary task. CA From KAYAK’s Home (‘Flights’) page. Likely most visitors would not click on these. 3. The middle column provides helpful information. But then. west. CA” from the drop-down list Click inside the ‘When’ text box to view the drop-down calendar Select the date for the night of the first stay Select the date for the night of the last stay Select number of rooms needed Select number of guests staying at hotel during visit Uncheck any checked boxes in the ‘Choose Sites to Compare vs.

users who end up focusing on how to find information on a site. While navigation is not nearly as important as content (U. frustrated. may become discouraged. 2006). rather than on what they are looking for (i.. Thus.S. Suggested improvements include adding more items to the ‘Stuff To Do’ series of check boxes at the bottom left-hand part of the page. if only in a very limited way. The primary method of navigation on the KAYAK website is the embedded link. click the ‘More’ or the ‘>’ link Click on the ‘Explore’ link In the ‘From’ text box.kayak. the content itself).S. “KAYAK. with a green image of a plane at the point of origin. Sharp & Preece. The drop-down menu is located in the top right-hand part of any KAYAK page and contains an icon in the image of a flag of the user’s country of origin. . either internal to the website or to other external websites. Dept. embedded links and icons.” and redirects users back to the KAYAK Home (‘Flights’) page. Embedded links provide direct links to other pages. is the expanding dropdown menu. In contrast to the three-column listing of search results for hotels. KAYAK uses embedded links almost exclusively to navigate users between pages of the site. because the icon provides direct mapping back to www. who may leave the site and possibly never return again. CA” from the drop-down list The mapped results provide users with a good approximation of the cost to fly to a possible destination of interest. 2011).Find a travel destination that looks interesting (“Explore”) from a city of origin From the top navigation menu. This attractive icon contains the word. One notable exception is the KAYAK company logo visible at the top left-hand part of every page. is less overwhelming. A site that is not well-structured navigationally can be discouraging to visitors. One very useful feature is the ‘Flight Time’ slider that visitors can use if they want to confine their flight time to within a certain number of hours away from a city of origin. of Health and Human Services. type “sa” and select “San Diego. the logo is said to be isomorphic in that there is a relationship between “what is being represented and how it is represented” (Rogers. Another navigation method KAYAK uses. which contains the names and flags of other countries. Clicking on this icon results in a contextual drop-down menu. with the map. The best use of embedded links is to use a name that is relevant to the destination page (U.com when users click on it. Navigation schemes that are designed to minimize focus on the “how” and maximize focus on the “what” include drop-down and pop-up menus. Of these. the two-column format in the ‘Explore’ section. The familiar ‘Drag to zoom’ slider makes it easy to narrow one’s focus to a more specific geographic area or city. or may otherwise form negative impressions of the site.e. Navigation Types & Theory The theory behind website navigation is to allow visitors to a website to get around and find relevant information easily and efficiently. and currency names and symbols that users may select. III.

This section will analyze the organizational layout and content of the following three pages of the KAYAK website: ‘Flights’. 2006). Nearly the entire page is presented “above the fold”. the ‘Hotels’ link should redirect users to information relevant to hotels. intuitive and easy to use (Universal Design video. most users have likely formed a mental model of what to do when they see a text box . of Health and Human Services. recognition & recall (Universal Principles of Design video. 2006). which are almost begging users to enter information into them.Dept. 2006). affordance. These factors all illustrate that the Home page is very welldesigned in both its page layout and its content. the optimal use of embedded links is to use as few words as possible that best describes what happens when users click on a link. it is critical that it provides a good first impression by clearly communicating the site’s purpose. . these principles are embodied in a site’s page layout and content. Furthermore. the main navigation bar and comparison sites’ check boxes (at the bottom of the page) all make adequate use of manageable chunks of information. The ample use of text boxes also illustrates the affordance principle well because it is clear that these empty boxes require some kind of input. Nevertheless. the connection between the three types of site navigation described and the theories behind why they are used is to allow users to easily and efficiently peruse a website and find information relevant to their purpose for using it. the color scheme directs users’ attention to the main center of focus – the text boxes. Finally.click and type. ‘Explore’ and ‘Help’: ‘Flights’ Page The KAYAK Flights page is also the Home page. presenting the bulk of the website “above the fold.S. consistent.” and allowing easy access to other parts of the site (U. not to information about kangaroos or directions for installing a wood deck. Capella University. Because the Internet has been in common use now for almost two decades. which enhances recognition and recall and makes it easy for visitors to use. Additionally. consistent. There is a main navigation bar that includes links to other main pages within the website. As such. chunking. 2006). Dept. consistency. For example. alignment. the logo is placed in a common location – at the top left-hand part of the page. Capella University. IV. of Health and Human Services. Its design is somewhat aesthetically pleasing although the color scheme is a dull (boring) white-on-grey. to facilitate a site’s usability. intuitive and easy to use. The Home page layout and content conforms to notion that pages should be simple. Page Layout and Content A universal principle that needs to be considered when designing a website is that the website should be simple. To one degree or another. designers need to take into account factors such as aesthetics. In sum.

‘Budget’ and ‘Flight Time’. the page needs to be improved. there may not be a great demand to use the Help page. the others seem mismatched. Finally. only about half the page is visible “above the fold”. with its dynamic map. and shows the position of destinations in a state relative to others. ‘Help’ Page The Help page is primarily text-based. In contrast to the Home page. effective to use and enjoyable from the use’s perspective” (Rogers. therefore.‘Explore’ Page The Explore page uses a two-column design that largely consists of a map with pricing information relevant to specific destinations.” so this is not necessarily a poor design. varying shades of grey. V. Sharp & Preece. the Help page is not particularly aesthetically appealing. black and blue. The map’s layout and its representative icons present a good graphical illustration that captures flight costs and destinations. Using a color combination that includes white. Its icon is usually used for e-mail. and how to search for enter information and get results. this design illustrates excellence in both its page layout and content. encompass the following five components (safety is excluded because there are no . “Usability refers to ensuring that interactive products are easy to learn. These aspects warrant improvement. An exceptional aspect of this map/slider design is that destinations are dynamically interactive –repositioning the sliders makes some of the map icons disappear and reappear. The icons for the help items could also be improved. yet the icon for e-mailing KAYAK is in the shape of a person. The focal point of the Help page is toward the top where the main help items are. the slider at the top left-hand part of the map allows users to zoom into specific locations and realigns the map’s focal point. This is not only easy to use but this functionality enhances recognition and recall because users do not need to measure or calculate on their own costs (Budget) or travel distances (Flight Time). there are two other sliders on this page. 2011). however. Except for the ‘Hoteliers’. is aesthetically and visually pleasing to view. Similar to the Home page. Because KAYAK is fairly straightforward in how the site should be used. A complete usability evaluation of KAYAK will. while the Help page’s inconsistencies in both layout and content may not be so bad that they drive visitors away. ‘My Trips’ and ‘Pricing’ icons. And. the Explore page. Moreover. but incorporates a combination of icons and embedded links. In fact. clearly. Usability Evaluation An important part of interaction design is providing a good user experience. Its lightly gridded pattern promotes the cognitive recognition factor of perception. most people are presumably not interested in traveling to far away destinations that are visible “below the fold. and is categorized together with account (‘Account & email’). One glaring example is the ‘Questions and Feedback’ icon.

KAYAK. like specific dates or locations. most primary pages of the site are concisely displayed “above the fold” indicating that the information is streamlined. There are only a limited number of fields that require input information from users. Utility: How well does KAYAK facilitate users in finding information about travel? Users can enter search criteria based on their own set of customized entries. the search for travel information requires a specific set of criteria. cars. People need to enter information relating to point of origin and destinations. KAYAK also allows users to visit the ‘Explore’ page. KAYAK returns results that are both streamlined and accurate. This (input) information is user-specific and requires travelers to think about their travel needs. deals and vacation packages. which is evident from the flag icon that appears in the top right-hand part of the screen. KAYAK’s search results are presented back to users in simple (for a travel website) formats that are easy to read. users can find information for a variety of travel needs including flights. the KAYAK website is simple and concisely laid out. Furthermore. Thus. with links that users can click on (e. Efficiency: How productive can users be after they learn to use KAYAK’s website? KAYAK has many dynamic features that retain a user’s information. hotels. and most users probably have a mental model of the type of information they need to enter into a travel website anyway. specific hotel names or airlines). KAYAK also “remembers” the user’s country of origin.g. The broad scope of KAYAK’s content makes the site a great facilitator of travel information. makes entering and selecting information easy.. Although much of these search criteria and results. such as the originating and destination cities. Users can easily refine their searches to find an alternative. and provides deals based on the user’s previously input city of origin. Learnability: How easy to learn is the KAYAK website? As noted in #2 above (under Efficiency). Once input. the KAYAK interface retains the information for future visits by users to the website. KAYAK is very effective from a usability standpoint. with its dynamic features. when input and viewed on KAYAK. The utility of this page is that it inspires adventurous travelers and allows users to get an overall idea of the cost-distance relationship to yet unknown or “surprise me” type of locations. departure and return dates and the number of travelers. KAYAK has enabled many of its text boxes to be dynamic and . Furthermore. Finally.dangerous conditions posed in using the KAYAK website): Effectiveness: How well does the KAYAK website promote learning about travel and finding information relevant travelers’ needs? Aside from KAYAK. KAYAK is a very efficient website. seems awkward requires thought before it is entered. Search results are considerably concise and minimal for a website that pertains to travel.

If present. The “Loading page” notification box uses a familiar. this functionality would enable users to re-enter previously entered travel criteria. phrases and concepts familiar to the user. 2. KAYAK displayed a “Loading page” notification until the page loaded completely. the concise. Although not covered in this paper. combined with the fairly large orange buttons for users to click to perform normal searches. Memorability: How easy is it for users to remember how to use KAYAK once they learn how it works? The dynamic (drop-down) nature of many of the text boxes minimizes the amount of information users need to remember after they have learned how the site works.“intelligently” pre-populate information that users start to enter. in particular. the ‘My Trips’ link undoubtedly contains information about users’ past trips. VI. rather than system-oriented terms. Perhaps that was why there are no system status notifications. KAYAK is a site that is easy to remember how to use. Usability Heuristics Below is a usability heuristics evaluation of the KAYAK website according to Nielsen (1995). because its pages require relatively little information from users from the outset. streamlined page layouts and presentations demonstrate that there is little that users need to remember about how KAYAK works in order to be able to use it. Visibility of system status The system should always keep users informed about what is going on. Nielsen’s heuristic titles and descriptions are listed verbatim in italicized text. thereby minimizing the amount of information they would need to remember to plan a similar trip. Most websites with such a history have links that support finding links to similar purchases. real world term to clearly indicate the . These factors. illustrate that that KAYAK is easy to learn and use. Page loading times on the KAYAK website are fast. Follow real-world conventions. answers are nonitalicized: 1. with words. Match between system and the real world The system should speak the users' language. Once again. with one notable exception: after clicking on the ‘Explore’ link to open that page. through appropriate feedback within reasonable time. making information appear in a natural and logical order.

Although KAYAK has no discernible undo or redo features. Consistency and standards Users should not have to wonder whether different words. the website supports user control. Recognition rather than recall Minimize the user's memory load by making objects. 5. Dynamic drop-downs return the same acronyms regardless of the page from which they are called.. Follow platform conventions. hotels. Moreover. 6. User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. for example. The top navigation menu is visible and has a consistent look on all of KAYAK’s pages. Its dynamic drop-down features work for all modes of transportation and types of travel searches (i. KAYAK relinquishes control of the information necessary to perform a search query to users.website’s status. 4. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. or actions mean the same thing. and options visible. Aside from pre-populating the user’s country of origin and the ‘From’ city point of origin. The user . 3. Other parts of the site used real world terms in the user’s native language of English. there have been no discovered errors nor any errors that could have been prevented as a result. actions. users have the freedom to change these pre-populated fields and can use any city of origin or destination city they want in their search for travel information. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.e. flights. KAYAK is consistent in the way it functions. No system-oriented terms were detected. cars. Support undo and redo. situations. deals and vacations). From a user’s perspective.

diagnose. the website is flexible and efficient to use. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. 7. there were no recognized errors during the period KAYAK was used to prepare for this paper.” 9. Providing greyed-out prompts in certain text box fields. Allow users to tailor frequent actions. accelerators may be a tool of which users are unaware. precisely indicate the problem.may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Help and documentation . In accord with heuristic #5. The dynamic features of the KAYAK website and the ‘Explore’ page strongly support user recognition rather than recall. This is partially evident by the amount of information displayed “above the fold” in comparison to that visible “below the fold. Regardless of the user’s experience level. yet the KAYAK website provides search results relatively quickly. KAYAK’s website design is simple an minimalistic. Flexibility and efficiency of use Accelerators -. and constructively suggest a solution. and recover from errors Error messages should be expressed in plain language (no codes). like those for depart and return dates (“mm/dd/yyyy”) help users to recognize what date format to enter. and none required diagnosis or recovery as a result. Because there is probably a voluminous amount of information related to travel. 8. There is also text beneath certain text boxes (both greyed-out and black) that promote recognition rather than recall for their respective fields. 10.unseen by the novice user -. As has been discussed previously. Instructions for use of the system should be visible or easily retrievable whenever appropriate. Help users recognize.should not have to remember information from one part of the dialogue to another.

edu/p26237662/. and not be too large. focused on the user's task. Unit 1 Objectives and Learning Activities. 2013 from http://breeze. it may be necessary to provide help and documentation. Universal Design. Clicking on the links listed on the Help page.edu/p89635002/. however.Even though it is better if the system can be used without documentation. Capella University. [Universal Design video presentation]. Unit 1 Objectives and Learning Activities. References Capella University.capellauniversity. Finally. list concrete steps to be carried out. Conclusion The paper detailed a website usability analysis for the KAYAK travel website. Discussed under item #3 of the Page Layout and Content section.capellauniversity. 2013 from http://breeze. [Universal Principles of Design video presentation]. Next. but that are still applicable to today’s modern websites. resulted in well-organized. (2006). this paper explained the navigation theories behind KAYAK navigation implementation scheme used on its website. relevant and generally helpful information. It conducted a task analysis of a primary. It examined cognitive-affective elements that need to taken into consideration when designing a website. Retrieved May 29. Any such information should be easy to search. but the page design could add color and should be re-aligned more toward the center of the page to support the universal principle of consiguity. this paper examined 10 usability heuristics championed by Nielsen in the mid-1990s. Several universal principles of design mentioned in this video will be discussed in the context of . Retrieved May 29. The video about universal design will be used to support the notion that website should be designed with simplicity in mind. KAYAK’s Help page needs to be re-worked. (2006). It analyzed KAYAK’s page layouts ant the content used for three pages on the site and then conducted a usability evaluation by analyzing five important criteria. The documentation itself seemed adequate. Universal Principles of Design. secondary and a tertiary task. The icons were also mismatched and should be re-done.

page layout and content.html. affordance. 2006. This work by usability. . This website is the subject of this paper’s discussion. Dept. It will be used to illustrate that affective principles include more than just emotional qualities in humans. icon use and menu structuring. recognition. Nielsen.kayak. (2005). recall proximity and consiguity. 2013. It will be used to perform a website usability analysis. Ping.S. which will discuss all 10 usability heuristics.com. (2013). J.S. of Health and Human Services. 37(1). Z. The Research-Based Web Design & Usability Guidelines.gov will be used to address navigation theory. MIS Quarterly. alignment. This work by Ping offers current research on affective design phenomena.useit. Enlarged/Expanded edition. U.com/papers/heuristic/heuristic_list. Washington: U. Retrieved May 29. (2013). The principles to be addressed include aesthetics. The Affective Response Model: A Theoretical Framework of Affective Concepts and Their Relationships in the ICT Context. 2013 from http://www. Ten Usability Heuristics. consistency. It offers substantial support for many concepts of navigation including hyperlinking. KAYAK Software Corporation Website. Government Printing Office. It also contains support for proper ways of structuring a web page’s layout and why content is more important than navigation. from http://www. Nielsen’s work will be the primary source for the sixth section of this paper. Nielsen’s foundational work on usability heuristics originated 10 important types of heuristics’ evaluative criteria. chunking. Retrieved May 29. 247-274.

prices.org The Fernbank site has information on the history of Fernbank. experience IMAX. calendar of events. . information on purchasing tickets. Home page: the home page of the Fernbank website provides short descriptions and links to the other pages such as visit fernbank.fernbankmuseum. The 65 acre museum was originally planned to be used as a school in the woods for nature study. Fernbank Museum’s mission is to inspire life-long learning of natural history through immersive programming and unmatched experiences to encourage a greater appreciation of our planet and its inhabitants. explore exhibits. give.Unit 8 Example 3 Fernbank is a non-profit organization funded museum that presents exhibitions and programming about natural history that serves as not only entertainment. IMAX theater info. The URL to Fernbank Museum is www. membership and future visit information. but for educational purposes as well. museum hours. exhibitions. Fernbank Museum is one of the only museums in the world to grow out of a forest. and discover and learn. the mission statement. become a member. events. and different ways to contact the museum. These pages will be discussed in further detail in the upcoming portion of this paper. The about Fernbank link takes to a page that displays the history of Fernbank. Since opening the doors to the public in 1992.

special exhibitions. Each section is accompanied by a brief description and a link for more information. The exhibits are divided in to three groups: permanent exhibitions. special exhibitions. You can give cash donations and you can also volunteer. On this page you can find links to the Fernbank Café menu. Discover and learn: want to find information about field trips? Or maybe there was something that you saw and you want to ask a scientist. directions to the museum. Explore Exhibits: this page gives an overview of the exhibits you will find at Fernbank. Cognitive-affective design Perception refers to how information is acquired from the environment. For those who may not have seen a movie in an IMAX theater it is explained in further detail in the About the IMAX Experience section of this page. and Titans of the Ice Age. Give: this page provides information on how to make a donation to Fernbank. and permanent features. hours. There is also a membership application to download. You can also find a link to book a fieldtrip and there is a link for the Fernbank Museum app. Currently they are showing Everest. You can find links for this and other information like summer camp and downloadable resources. Experience IMAX: this page highlights some of the movies that you can view in the IMAX Theater. via the different sense . IMAX tickets and combination tickets. You can also download a visitor’s map and visitor’s guides in a few other languages. Become a Member: this is where the user can find all the information needed to obtain a membership. Flight of the Butterflies. Calendar of Events: this page contains monthly calendars with information for the IMAX Theater.Visit Fernbank: this page provides brief descriptions for some of the information you may want to look at before coming to Fernbank. Prices: on this page you will find a breakdown of the prices of for museum tickets. and events and activities. and events and activities.

and tastes (Yvonne Rogers. When it pertains to the web your vision provides the most immediate response to the page. Select a date from the calendar. Click Admission-Museum link or click Find Tickets link in Admission-Museum section. The graphics and icons make finding certain topics on the page easier and it is very easy to locate items on the page. The affect that this has on the user is that it is inviting and leaves the user interested in what Fernbank has to offer. Task Analysis Task analysis is a hierarchical representation of what steps need to be taken to perform a task for a particular goal. The links are relevant to the information the user may be looking for. .com. you have to click Find Tickets on the next page. There is also a news and announcements area that gives brief descriptions accompanied by a “learn more” link to help you find current events and information. Learning how to use the Fernbank website is very simple. Purchase Tickets for museum admission Click the purchase tickets graphic This opens in another window. Fernbank’s site is visually stunning with different exhibits and events on display on the home page. 2011). events. these tasks can be divided into subtasks until the overall process is defined. They also provide various ways to different task such as look at the calendar of events or become a member by placing links on multiple pages. The AdmissionMuseum link should take you to the calendar page like the Find Tickets link. 2011) states memory involves recalling various kinds of knowledge that allow us to act appropriately. Create user account Purchase Tickets View calendar of events Click on calendar of events link or click calendar icon. to demonstrate the site’s usability and define areas of strengths and weaknesses. Fernbank provides users descriptive links and only necessitate a minimum amount of steps to perform a task. If you click Admission-Museum. Choose quantity of tickets that you need and click add to cart. which helps guide the user to the appropriate page. museumtix.organs and transformed into experiences of objects. View weekly events or click a date on calendar to see that day’s events. The following is an analysis if three separate tasks. sounds. executed on the Fernbank website. When necessary. but this is because tickets are purchased through an outside company. Sharp (Yvonne Rogers.

etc. Users can land at any page within a website my several different methods such as links. This allows users to move quickly from a main topic to a sub-topic without scrolling down the page. 2012). Click about Fernbank in left navigation link. Navigation should be a prominent element of your design. Fernbank uses two different types of navigation: local and global. Click Sign up link in the Stay in Touch section of the page. context sensitive menus. Local navigation contains elements for navigating locally within some subset of pages in a site usually called a sub-site (Kantor. a top navigation bar. Fernbank utilizes global navigation by linking items in the top navigation bar to the menu items located in the side navigation bar. Including a logo at the top. search engine. 2012). Global navigation is used to aid in movement throughout all pages of the website from category to category for the major sections of the site. a directory. This process could be simplified by placing an “About Fernbank” link on the homepage. . embedded links for images. 2003). because good navigation depends on a sense of place that good quality website organization facilitates (Yuan Shen & Win. Click subscribe. There is also information and links for intern and volunteer opportunities as well as how to submit your information. Fernbank’s homepage uses multiple aspects of navigation theory to make the navigation of their site less difficult. “breadcrumb trails”. The main body of the page has links for the Animal Programs Facilitator and Network Administrator. site map.This process is relatively simple and there are no recommendations for improvement. The condition of good navigation necessitates a good quality website organization. Organizational Layout The employee opportunities page has information for multiple opportunities for to become a part of Fernbank’s team. There is also information for how to submit your application. Sign up for e-newsletter Click Visit Fernbank link in top navigation bar. Integrating different ways of navigating makes it easier to move from one section to another and locate information more efficiently. Fernbank uses local navigation through embedded links and images. Enter e-mail address and check preferred newsletter(s). Users navigate through websites in different ways. Navigation Theory Real-time and reliable location information of mobile nodes is a key enables for many emerging wireless network applications (Yuan Shen & Win. typing the web address. and location details provides users multiple ways to access information.

The navigation bar provides quick access to the more important topics and once you select a topic from the navigation bar or links a side bar navigation is also available on each page. This provides the user with rapid access to multiple subjects such as ticket information and the calendar of events. and browsing effectiveness.The home page has the logo in the top right corner. This involves analyzing the site’s subject groupings. The site makes proper use of whitespace and text size is not straining to the eyes which make locating important information easy to find. It returned 81 matches mostly consisting of events that are/were going to be happening at Fernbank. search capabilities. and two links: one for giving money. and one for giving time. There is a navigation bar at the top with advertisement space below. Rieman. and more. explore exhibits. It also provides press release and exhibit information. There is a navigation bar located at under the banner with clickable links and graphics located throughout the page. Usability Heuristics Nielsen (2000) states the goal of heuristic evaluation is to find the usability problems in the design so that they can be attended to as part of an iterative design process. with descriptive menus and navigation links that allow visitors to move from one section to another easily. I tested the engine to using “dinosaur”. an email link. discover and learn. Fernbank provides a search option in the footer of the page. On the home page you can find various links to other pages such as become a member. The pages of Fernbank use a combination of global and local format navigation. 2012). plan a field trip. Franzke. The Give page has photos and highlights of fundraising events in the ad space under the navigation bar. Browsing the Fernbank site is very simple due to the use of several different ways to navigate the site. Having other tools. The cognitive walkthrough was essentially developed to evaluate how users utilize the site for real-world tasks. In the body of this page you will find a brief description. experience IMAX. Usability Evaluation Web usability focuses on design elements and processes that make web pages easy to use (Jean Snider. This means it should be organized. and Redmiles (2000) discuss a technique for evaluating the design of a user-interface called a cognitive walkthrough. such as a search engines. Basic information is placed in the top section of the page next to the ad space. Below is an . also make finding information on the site easier.

left. Match between system and the real world. Fernbank’s site was designed with plenty of white space to ensure the user does not feel overwhelmed. links.analysis of the Nielsen heuristics for the Fernbank website.system keeps user informed of status. Providing navigation bars on the top and side panels allow users to jump from on subject to another easily. All Fernbank’s pages follow the same design layout throughout all pages. Spacing and grouping by subject makes information easy to find.colors. relevant information without overpowering the user. Recognition rather than recall.clear easy to understand. and footer. Subject related graphics are also used to help users recognize different subjects. All pages for Fernbank’s site load quickly and present no errors related to java script or browser compatibility. and content are consistent.quick response. User control and freedom. All graphics loaded quickly and page has been formatted to fit the screen size. Aesthetic and minimalist design-visually pleasing. Error prevention. side. info in logical order. This site was designed to allow the user to multiple methods to navigate through the site. Consistency and standards. easily viewable. easy to understand terminology and language. The navigation bar is consistently located under the banner of each page. with the exception of purchasing tickets.navigation top.system is visible and easily retrievable. There is also a site map located in the footer along with the search option. Visibility of system status. and there is also navigation bar located on the side of each sub-page. The Fernbank site uses clear. does not crash. .

The Fernbank logo at the top of the page also takes you back to the home page.Help users recognize.navigation aids and home button. so there was no observation of any error messages. Fernbank offers a site map. . I did not notice any errors while performing the site assessment.site map. or the back button in the web browser. connect with Fernbank. and recover from errors. or on the side when available. Help and documentation. diagnose. To navigate the site you can use the navigation bar at the top. search. contact information as well as e-mail information.