Krug- Chapter 11 & 12 (MP 30)

10 Memorable Things from Krug

1.  The "Don't Make Me Think" motto... websites should be effortless and self explanatory, and the user should not have to "think" while using them.

2.  How the user's eyes move over a site as they scan.

3.  Satisficing- the user takes the first option that is presented to them pertaining to what they're looking for.

4.  "Billboard Designing" and visual hierarchy.

5.  Make links, pictures, etc OBVIOUS that they're clickable.

6.  Eliminate business and background noise.

7.  Minimizing text and omitting needless words.

8.  The trunk test.

9.  How to include everything on the homepage and still get the message across.

10.  The usability test.

Krug- Chapter 10 (MP 28)

For my usability test, I had Samantha Baccala test my web site.

She is a student at Quinnipiac University.

She spends approximately 30 hours per week using the Internet.

About 75% of that time is spend browsing, while 25% is spent emailing.

When browsing, she mostly looks at social networking, blogging, and news sites.

Her favorite websites are facebook and pinterest.


Sam described the home page to be warm and inviting with interesting graphics and very little clutter. She was instantly able to tell that it was a website for Stafford Diner.

First, I asked Sam to find the menu. She clicked on the "Menu" button in the nav bar to the left and was brought to it in one click.

Next, I asked her to find the address of the diner.  She moved her mouse to the left again and clicked on "About Us" where she was taken to the address.

Finally, I asked her to "follow" Stafford Diner on twitter, to which she found the twitter icon under the nav bar and clicked "follow".

Krug- Chapter 8 & 9 (MP 27)

Hi, ___________. My name is Melissa, and I’m 

going to be walking you through this session today. 

Before we begin, I have some information for you, and 

I’m going to read it to make sure that I cover everything. 

You probably already have a good idea of why we asked 

you here, but let me go over it again briefly. We’re 

asking people to try using a Web site that we’re working 

on so we can see whether it works as intended. The 

session should take about an hour. 

The first thing I want to make clear right away is that 

we’re testing the site, not you. You can’t do anything 

wrong here. In fact, this is probably the one place today 

where you don’t have to worry about making mistakes.  

As you use the site, I’m going to ask you as much as 

possible to try to think out loud: to say what you’re 

looking at, what you’re trying to do, and what you’re 

thinking. This will be a big help to us. 

Also, please don’t worry that you’re going to hurt our 

feelings. We’re doing this to improve the site, so we 

need to hear your honest reactions. 

If you have any questions as we go along, just ask them. 

I may not be able to answer them right away, since 

we’re interested in how people do when they don’t have 

someone sitting next to them to help. But if you still 

have any questions when we’re done I’ll try to 

answer them then. And if you need to take a break at 

any point, just let me know. 

You may have noticed the microphone. With your 

permission, we’re going to record what happens on the 

screen and our conversation. The recording will only be 

used to help us figure out how to improve the site, and it 

won’t be seen by anyone except the people working on 

this project. And it helps me, because I don’t have to 

take as many notes.  

Also, there are a few people from the Web design team 

observing this session in another room. (They can’t see 

us, just the screen.) 

If you would, I’m going to ask you to sign a simple 

permission form for us. It just says that we have your 

permission to record you, and that the recording will 

only be seen by the people working on the project.  

 

 Give them a recording permission form and a pen  

 

 While they sign it, START the SCREEN RECORDER 

IF YOU ARE USING A NON-DISCLOSURE 

AGREEMENT (optional): 

I know we also sent you a non-disclosure agreement that 

says that you won’t talk to anybody about what we’re 

showing you today, since it hasn’t been made public yet. 

Do you have that with you? 

 

 Accept the NDA and make sure that it’s signed. If 

they don’t have it with them, hand them a copy 

and give them time to read and sign it. 

Do you have any questions so far? 

OK. Before we look at the site, I’d like to ask you just a 

few quick questions.  

First, what’s your occupation? What do you do all day? 

Now, roughly how many hours a week altogether—just 

a ballpark estimate— would you say you spend using 

the Internet, including Web browsing and email, at work 

and at home?  

And what’s the split between email and browsing—a 

rough percentage? 

What kinds of sites are you looking at when you browse 

the Web? 

Do you have any favorite Web sites? 

OK, great. We’re done with the questions, and we can 

start looking at things. 

 

 Click on the bookmark for the site’s Home page. 

First, I’m going to ask you to look at this page and tell 

me what you make of it: what strikes you about it, 

whose site you think it is, what you can do here, and 

what it’s for. Just look around and do a little narrative. 

You can scroll if you want to, but don’t click on 

anything yet. 

 

 Allow this to continue for three or four minutes, at most. 

Thanks. Now I’m going to ask you to try doing some 

specific tasks. I’m going to read each one out loud and 

give you a printed copy. 

I’m also going to ask you to do these tasks without using 

Search. We’ll learn a lot more about how well the site 

works that way. 

And again, as much as possible, it will help us if you can 

try to think out loud as you go along. 

 

 Hand the participant the first scenario, and read it 

aloud. 

 

 Allow the user to proceed until you don’t feel like it’s 

producing any value or the user becomes very 

frustrated. 

 

 Repeat for each task or until time runs out. 

Now I’m going to ask you to try doing a few more 

tasks. This time, you are allowed to use Search.

 

 Repeat steps for previous tasks.

Thanks, that was very helpful. 

If you’ll excuse me for a minute, I’m just going to see if 

the people on the team have any follow-up questions 

they’d like me to ask you. 

 

 Call the observation room to see if the observers have 

any questions.  

 

 Ask the observers’ question, then probe anything you 

want to follow up on. 

Do you have any questions for me, now that we’re 

done? 

 

 Give them their incentive, or remind them it will be 

sent to them. 

 

 Stop the screen recorder and save the file. 

 

 Thank them and escort them out. 

Krug- Chapter 7 (MP 26)

http://www.google.com/

What's the point: To search for info, images, videos, maps, news, etc...

Where to start: Type something in the search bar or chose a category from the nav bar at the top


http://www.apple.com/

What's the point: Learn about available Apple products/buy Apple products

Where to start: Choose a category in the nav bar on top or type something in the search bubble... you can also click on the product currently being advertised on the home page.

http://www.wikipedia.org/

What's the point: To search for information about something

Where to start: Choose a language or type something in the search bar

http://.netflix.com/

What's the point: To watch movies and tv shows

Where to start: Select a category at the top, a movie or show displayed on the home page, or type something into the search bar

http://www.amazon.com/

What's the point: Online shopping

Where to start: Select a category to the side, type something into the search bar at the top, or click on one of the advertised items on the home page

Interactive Prototype- Minor Project 29

Partner: Julie Abott

Here's the link to our site!

http://thestafforddiner.drupalgardens.com/

Stafford Diner Website Mockups

A couple different versions...

Stafford Diner Sitemap

Partner: Julie Abott

Stafford Diner Website Wireframes

Partner: Julie Abott

Client Brief- Lucas Gonzalez / Stafford Diner

Partner: Julie Abott

The Core Creative Concept:

To create a website for The Stafford Diner located in Bristol Connecticut, owned by Lucas Gonzales. The website will be a hub where potential and or exisisting customers can find out more information on The Stafford Diner. Information that will be available for viewing will be the history, the Diner's menu, customer reviews, contact information, and links to different social network accounts that the Stafford Diner has such as Facebook and Twitter.

The Overall Look & Feel:

The website will reflect the traditional neighborhood diner feel with warm welcoming colors such as reds and yellows. To add some contrast to the site we will also bring in some blues, blacks, and whites. (See swatches below)

Purpose & Objectives:

The purpose of this website is to give Lucas Gonzalez a website that will help promote his business, "The Stafford Diner" in Bristol, Connecticut. By having this website it will give costumers a chance to research the Diner and find information such as the diner's history, food & prices, reviews, and contact information. Images and other media will be included to draw in users.

Infromation Architecture:

The website will contain a header on each page that will have The Stafford Diner's Logo in the top left. Under the header will be a divider dividing the header from the main area of the webpage. Under this on the left side of the webpage will be the main navigation in vertical form, containing the following links: Home, About Us, Menu, and Contact. It will be very simple, and very straight forward. The less links there are the easier it will be for the user to navigate throughout the website and receive the information they are looking for. To the right of the links there will be a large compelling image slide show that will take up about two thirds of the websites width. Under the navigation and the large image will be two external links leading to The Stafford Diner's facebook/twitter pages, and one link that will lead to reviews on The Stafford Diner either a seperate part of the website where people will be able to come and write reviews, or will be an external link to Yelp.com or some other type of restaurant review website.

Audience:

The audience for this website will be for everyone and anyone who is looking for great food at an extroadinary low price, specifically in the Bristol, Connecticut area.

Design & Visual Hierarchy:

The typography used for Lucas's site will be a simple sans-serif font. The main attraction will be the image slide show on the landing page. The navigation will be in vertical form. Titles throughout the website will be a larger, bolder, and different color font than body text. Links will be distinguishable by the word being underlined, and having a different color than any other text on the site. The use of rollovers will also be used in order to give feedback to users to distinguish clickable areas from non-clickable areas.

Schedule for Implementation:

November 11th - Design Brief and Wireframes

November 15th - Mock ups

December 7th - Completed Website

Inspirational website:

http://www.silverdiner.com/restaurants/tysons-corner-silver-diner

Krug- Chapter 6

Trunk Test Screen Shots

Krug- Chapter 5

People may say that the times have changed in so very many respects, however, at Roadside Academy, we still maintain small intimate class sizes, the  teaching of traditional principles, the incorporating of values, ethics and moral character in the curriculum, and most of all, the pursuit of excellence in education.

After 16 years of educating the future world and local leaders of tomorrow, Roadside is enjoying a new location! We are at 30 Brooks Road (in the school building adjacent to Fellowship Church) in Middletown, CT.  Please call to arrange a tour of our facility! Your family will be glad you did!

..........

Roadside Academy maintains small intimate class sizes, the  teaching of traditional principles, the incorporating of values, ethics and moral character in the curriculum, and most importantly, the pursuit of excellence in education.

Roadside has been educating the future world and local leaders of tomorrow for 16 years. Recently, we've moved to a new location: 30 Brooks Road (in the school building adjacent to Fellowship Church) in Middletown, CT.  Please call to arrange a tour of our facility!

Krug- Chapter 4

The main reason why users like mindless choices is the certainty that comes with it.  If the user has to stop and think about what choice to make, there is likely a level of uncertainty over whether they're making the correct choice or not.  With mindless choices, there is no uncertainty. An example of a well-designed mindless choice would be a clear, concise, and "minimalist" navigation bar. A well designed navigation bar that is clear, legible, and with few words as possible allows to user to make a mindless choice about what part if a particular site or information they're looking for.

Mimesis Website Mockups

A link to the real, working site!

Partner: Sam Baccala

http://mimesisproject.drupalgardens.com/

Mimesis Website Sitemap

Mimesis Website Brief

Partner: Samantha Baccala

The Core Creative Concept: Simple and clean design that showcases the students work and makes it accessible to the online community. It will have navigation that will lead to each topic that the students are responsible for. There will also be a side navigation that breaks down the topics further. The students will be able to edit their own work as well as upload images and videos to support it.  

The Overall Look & Feel: The website will have a classical and older feel. The design will highlight the students’ work and relate to the content of the class. The color scheme will be filled with light colors such as tans greens and grays. 

Purpose & Objectives:  The purpose of this website is to give the students a place to collaboratively place and display their work.

Information Architecture: We will be using a template through drupal that gives us the opportunity to drastically edit it and to allow for the Professor and students to easily access and change their work. The website will include the typical header and footer. There will be two forms of navigation, primary and secondary. The right hand side bar will contain media placed by the students that relate to their work.

Audience: The primary audience for this site is Professor Noell and his students. In the future the goal is to have it become a source of information for the public and possibly be supported by the Quinnipiac University Library.

Design Visuals & Hierarchy: The typography used for the site will be Times because it has the old and scholarly feel while also being readable. We will use a decorative serif for the header. Under the header will be a horizontal navigation bar that will have the most important links. There will be a second navigation in a left hand side bar that will break the main navigation’s topics down further. These navigations will use the same typefaces in order to make the viewer categorize them together.

Schedule for implementation:

October 26th - Design brief Sitemap & mockup presentations

November 2nd – Final Designs

December 7th - Completed Website

Color Scheme

Website Inspiration for Color Scheme

Website Inspiration for Layout

Drupal template used for implementation of site

Krug- Chapter 3

In Chapter 3, Krug explains how to design a website for scanning, as opposed to reading.  One of the most important and widely used tool for easy scanning is visual hierarchy.  Visual hierarchy tells the viewer what is most important and what information goes together without the viewer actually having to think about it.  Generally, the more important something is on a page, the more prominent it is.  Another tool to make scanning possible is by making buttons and clickable things obvious.  There's nothing worse than having to click around a website until you find a link.  The viewer should immediately, without thinking, be able to recognize all clickable items on a page and where they lead to.

Simple Web Pages

http://mywebspace.quinnipiac.edu/magaines/index1.html

http://mywebspace.quinnipiac.edu/magaines/index2.html

Classic Care Site Map & Mockups

Krug- Chapter 2

In Chapter 2 of "Don't Make Me Think", Krug explains that the way we think users view websites is very different from how they actually do.  For example, users scan the majority of websites, meaning they look for key words or phrases that catch their eye.  Rarely do users take the time to read the entire text on a page, especially if it is lengthy.  Users searching the web are usually in somewhat of a hurry and don't need to know all of the information given on a page.  Instead, they scan things in order to find the information they need or are most interested in the quickest.

Satisficing is another tool that users use while using the web.  When a user arrives at a site and is looking for something, instead of taking to time to review all of their options to find it, they simply take the first one that is presented at them.  Although this isn't necessarily the best option to get to where we need to go, we take the first reasonable option we find.  Mostly, this is because we're in a hurry, and if we've chosen the wrong option, all we have to do is press the back button to try again.

Classic Care Website Wireframes

Classic Care Client Brief

For the Classic Care website we would like to create a page that is clean and professional, while still using compelling visuals to draw her clients in. Our goal is to have her business stand out from all of the other occupational therapy services in the area, by clearly showing the quality of her services and devotion to her patients. To accomplish this overall feel of simplicity, we are going to use white, while incorporating the navy blue that Tracy is already using on her business cards. We also would like to use a light tan and possibly lighter shades of the navy. We would like to incorporate a serif into the website to keep the parallel between her business cards. The header, navigation bar, and all main titles will be a serif, while the bodies of text will be sans-serif in order to create contrast and ensure readability. For the serif font, we would like to use Baskerville Old Face and for the sans-serif font we will use Helvetica. All of these elements will work together nicely to convey a professional, yet welcoming feel.

For our information architecture, we will have the navigation bar be horizontal across the top, and our main pages will be Home, About Us, Aging in Place, Home Modification, Child Safety, OT in the Community, and Events. Overall, each page will only be one layer deep with possible links to external sites. The target audience for this website will be her returning clients as well as anyone who is inquiring about occupational therapy services. Within the next two weeks we will have all stationary mockups completed and ready to be converted into a working website. The reference website we found most helpful is http://ednacional.com/. This website has a very similar color scheme and simplistic design, and it also incorporates the slideshow we would like on the home page. 

"Don't Make Me Think"- Chapter 1

Krug's first law of usability is indicated by the title- "Don't Make Me Think". Basically, he means that when a user first visits a website, it should be completely-self explanatory.  The website- what it is and how to use it- should be obvious.  The user should not have to put forward any effort to think about it; they should just get it.  Krug points out that the main importance of self-evidence is not necessarily that the user will leave and search for another site, because this is not always true.  Rather, the importance is simply that the self-evident website just seems better and works smoother.  It is effortless and therefore most effective to the user.  Anyone would prefer a site that is usable at a glance over one that makes you think and ask questions.

CAS Website Mockups

CAS International Working Group Website

Site Map...

Low-fidelity Wireframes...

High-fidelity Wireframes...

"If it's short, it's more likely to actually be used."

An interface is defined as "a surface regarded as the common boundary of two bodies, spaces, or phases" (Dictionary.com).  In the design world, an interface is regarded as the platform being used, such as a computer, smartphone, or tablet. The interface is, essentially, the common boundary between multiple users.

Interaction design is simply the design of something on an interface that the user will actually be interacting with, such as a web site or application. Interaction design includes how the user will interact with the product, for what purpose, and what happens after they interact. Steve Krug defines this as "what happens when the user clicks".

Information architecture is the way how everything within a website or application is organized. This includes actual placement of information, as well as navigation among different information. This organization is important because it brings the entire website or application together and makes it functional for the user. The most effective way to begin the organization is with a site map.

Krug defines usability as "really just making sure that something works well: that a person of average (or even below average) ability and experience can use the thing for its intended purpose without getting hopelessly frustrated". This means that the information architecture must be organized, sensible, and flow well, and interaction design must be easily understandable and interact as the user expects or needs.

Client 1 Design Brief

For the CAS International Working Group, we want to create a website that is clean, compelling, and has smooth functionality.  Our goal is to construct a simple, yet innovative website to not only support the various content while also being aesthetically pleasing.  Our target audience is the campus community, but focuses specifically on those involved in international or multicultural subjects.  Being that there is an overwhelming amount of university related websites, we strive to create a striking, yet distinctive resource.

            Visually, we want to exude a welcoming feeling.  Our color palette will include earth tones paired with warm hues.  The browns and neutral tones will appeal to the wide audience as well as convey the idea of “multiculturalism”.  By not choosing a distinct color (red, green, etc.), we will avoid targeting a specific culture.  Although we want the website to be individualized, we also want it to incorporate the university colors in a subtle manner.  This will add contrast to the website, while falling under the university umbrella.  Therefore, we want the visual message to convey that the university cherishes multiculturalism, while also being distinct from other university websites.  For typography, our objective is a classic and intelligent feel.  When viewing a serif typeface, one is drawn to the timeless structure of the letters.  Since the university uses a serif typeface, that will create another parallel between the websites.  The elegant, yet vintage typeface paired with the traditional, neutral tones is our paradigm of multiculturalism.

             As stated before, students and faculty are exposed to an overwhelming amount of university websites.  Our aim is to create simple navigation, made up of approximately seven tabs.  These tabs will include the main information of the website, including “About Us”, “Events”, etc.  Because there is so much information given, we can deliver the content through “parent-child” pages.  While the main tabs will be located at the top of the page, there will also be compelling images to represent the additional topics, such as Student Blogs and Games for Change.  Not only will these images be an aid in the navigation process, it will also contribute to the visual pull and add contrast.