Tuesday, December 13, 2011

Minor Project 30 Read and Blog

1. Making things that are obviously clickable.  You don't want to make your users have to think about whether something is a link or not.

2. The images in the chapter about how we really use the web that show the eye path of a user.

3. Designing for scanning.

4. Making labeling clear and concise.  

5. Omitting needless words on the web.  

6. Clear Navigation - having it stay relatively the same on each page so that is not confusing to the user.

7. The Trunk Test -  is there a title and section for everything that is important on the page.

8. How using taglines and blurbs can make it easier to get the message across.

9. The Usability Test - you always need to test out your site because it is always going to have a clear message to you because you made it.

10. Don't Make Me Think - make everything user friendly.

Wednesday, December 7, 2011

Minor Project 29: Dynamic Prototype

http://www.wix.com/samanthabaccala/bhptest

Minor Project 28: Blog Ch10

I had Melissa Gaines do the usability test for my website.

She is a student at Quinnipiac University and works at Charlotte Russe.

She spends an average of 28 hours on the internet a week. 

Around 80% of the time it is web browsing.

She looks at social media sites, music sites, and news.

She really likes being on twitter.

She thought the website had a warm and inviting feel.  The images really caught her attention.  She immediately knew it was a website for a pizzeria.  She liked how she could see all of the different menus and that the daily specials are on the page as well so you don't have to go into the restaurant to see them


I then asked her to find the reviews from urban spoon and it only took her one click to get there.  She immediately knew to go to the reviews tab and found it there. 

Next I asked her to find the facebook page and she saw the facebook button on the bottom of the page and again was there in one click.

Finally I asked her to find the dinner menu and in 2 clicks (menu, dinner) she found her way there.

Wednesday, November 30, 2011

Minor Project 27: Usability Test Script



q Web browser should be open to Google or some other “neutral” page
Hi, ___________. My name is Samantha Baccala, 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.
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. 

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.

q 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.

Don’t click on anything yet.

q 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.

q Hand the participant the first scenario, and read it aloud.
q Allow the user to proceed until you don’t feel like it’s producing any value or the user becomes very frustrated.
q Repeat for each task or until time runs out.
Thanks, that was very helpful.
Do you have any questions for me, now that we’re done?

q Give them their incentive, or remind them it will be sent to them.
q Thank them and escort them out.

Saturday, November 12, 2011

Minor Project 26: Read & Blog

www.amazon.com
  • What's the point of this site?
    • To buy items.
  • Do you know where to start?
    • Yes, by picking a category or typing in what I am looking for.
  • What's the point of this site?
    • To make your own blog or website.
  • Do you know where to start?
    • Yes, by either logging in or clicking the get started button that is clearly defined in orange.
  • What's the point of this site?
    • To view video content.
  • Do you know where to start?
    • Yes, by either searching for a video or viewing one of the suggested ones below.
  • What's the point of this site?
    • To watch movies and tv shows instantly online.
  • Do you know where to start?
    • Yes, by either searching for a video or viewing one of the suggested ones below.
  • What's the point of this site?
    • To create virtual bulletin boards for whatever topics you like.  For example, a food board that has pictures of different food which take you to the link where you can find the recipe.
  • Do you know where to start?
    • Yes, by looking at what other people pin to their boards or finding things to pin to your own board on the web.

Thursday, November 10, 2011

Minor Project 23: Brickhouse Pizzeria Schematic/Site Map

Minor Project 22: Brickhouse Pizzeria High Fidelity Wireframes

Partner: Rachel Francer



Minor Project 21: Brickhouse Pizzeria Creative Brief

Partner: Rachel Francer


The Core Creative Concept: For the Brickhouse Pizzeria website, we want to evoke a hip and trendy vibe. We are going to incorporate the illustrious chalkboard that is used to display the weekly specials, because the customers are very familiar with that element. We are also going to use many big pictures to not only entice the viewer, but to accentuate the originality and quality of the food.

The Over-All Look and Feel: For the Brickhouse Pizzeria website, we want to evoke a hip and trendy vibe. We are going to incorporate the illustrious chalkboard that is used to display the weekly specials, because the customers are very familiar with that element. We are also going to use many big pictures to not only entice the viewer, but to accentuate the originality and quality of the food.


Purpose and Objectives: For the Brickhouse Pizzeria website, we want to evoke a hip and trendy vibe. We are going to incorporate the illustrious chalkboard that is used to display the weekly specials, because the customers are very familiar with that element. We are also going to use many big pictures to not only entice the viewer, but to accentuate the originality and quality of the food.

Information Architecture: We will clearly divide the website using the navigation bar with a section for home, weekly specials, menus, catering, reviews, and contact information. The navigation bar will be located below the main content, with secondary navigation when needed. For example, on the menu page there will be another form of navigation to choose which menu the user would like to peruse. We will be using a template through Wix.com which gives us the ability to drastically customize the layout and architecture of our site. 

Audience: The audience includes anyone from families to businessmen and women. Because the restaurant is located fourteen hundred feet from the water, many boaters who dock there come in and grab a bite to eat. The site is really aimed towards anyone who appreciates delicious and unique gourmet food!

Design and Visual Hierarcy:  The typeface we will be using for the menu is a sans serif called Tuffy. We wanted to use this because it is more of a display typeface than a body-text typeface. For the body typeface we will use another sans serif font called Lucida Sans.

Schedule for Implementation: 
November 16th: The brief, site map, wireframes, and mockup presentations will all be completed. 
November 30th: The preliminary composition of the website. 
December 14th: The website will complete and ready for publishing.

Inspiration:

Template:

Wednesday, November 2, 2011

Minor Project 20: Read & Blog

Original Paragrpah:

In our rapidly changing world, technology and science can become outdated rapidly. In science class, we seek to equip students with the skill to become scientists of tomorrow. We encourage students to actually become scientists and to develop solid observation skills though regular experimentation and hands-on activities. Students learn basic concepts but are not made to simply memorize a large quantity of facts. They are encouraged to develop thinking skills and analyze information and then to draw reasonable conclusions.

Omitted Paragraph:

In science class, we seek to equip students with the skill to become scientists of tomorrow.  Students participate in hands-on activities such as experiments to learn how to analyze and draw conclusions. We encourage developing thinking and observation skills while also teaching basic concepts. 

Minor Project 19: Read & Blog

In Steve Krug's book, "Don't Make Me Think: A Common Sense Approach to Web Usability," he talks about mindless choices.  People like mindless choices so that they can focus on what they really need to rather than what the links mean and if it is going to lead them to the right place.  It makes focusing on the subject at hand less stressful.  Users want everything to be clear cut and simple.

For example, when looking at a news website, they have different categories of news which are clear and you know exactly what types of news stories are going to be in that section.  If you are looking for a story on the baseball game last night, you certainly would know to go to the sports section rather than the political section.

Monday, October 24, 2011

Minor Project 16: Major Project brief. Client: Professor Brian Noell, EN102 "Mimesis"

Partner: Melissa Gaines


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

Layout Inspiration:


Color Inspiration:

Template:


Monday, October 17, 2011

Minor Project 15: Read & Blog Chapter 3

In Steve Krug's Don't Make Me Think: A Common Sense Approach to Web Usability he discusses designing web pages for scanning and not reading.  He lists many different ways to achieve this goal such as creating a clear visual hierarchy and breaking up pages into clearly defined areas.  I think those are 2 of the more important points that he discusses in chapter 3 because they set the tone for everything else.  Creating a clear visual hierarchy makes sure that the most important things on the website are read first.  Also, by making things that are related look uniform, it makes it easier for the user to navigate quickly.  He goes on to say, "A good visual hierarchy saves us work by preprocessing the page for us, organizing and prioritizing its contents in a way that we can grasp almost instantly."  The second point that Krug makes that I think is very important is breaking pages up into clearly defined areas.  Using a well defined grid makes everything more visibly grouped.  People can quickly figure out which information is useful to them and know that everything contained in that same area could pertain to them as well.

Tuesday, October 4, 2011

Minor Project 14: Read & Blog

In Chapter 2 of Don't Make Me Think by Steve Krug we learn 2 key terms in web usability.  Both scanning and satisficing are very important to know when designing for the web.  We do not realize how often people only scan the content on the page rather than reading it thoroughly.  This is why when designing for the web you have to make sure your links and content have clear meanings and should stand out.   I am always in a hurry and doing a ton of things at once so when I go to a website I try to do things as fast as possible or I am doing something else as well so it does not get my full attention.  I know when I go to a website for a specific purpose my eyes almost "glaze over" until I see something that resembles what I am looking for. Which brings me to the topic of satisficing, which Herbert Simon defines as a cross between satisfying and sufficing.  Like I mentioned before, when a person finds a link that might lead them to where they need to go, they will click it without looking for a better option further down.

Monday, October 3, 2011

Minor Project 11: HiFi Wireframes Client Prof. Tracy Van Oss



Minor Project 10: Project "Brief" Client Prof. Tracy Van Oss


The Core Creative Concept: Simple and clean design that reflects Tracy's work in the medical field. It will have navigation that will lead to learning more about what Tracy does, who she is, and how to contact her.  Also the option of viewing images and videos will also be available throughout the website in order to really draw in users. 

The Overall Look & Feel: The website will be casual, calm and inviting. It's sleek design will represent the work that Tracy does. The color scheme will be filled with cool colors such as blues, whites, teals, and beiges. 

Purpose & Objectives:  The purpose of this website is to give Tracy Van Oss a hub that encompasses all of her work into one place where she could direct her clients to. 

Information Architecture: The website will contain a header that will have Tracy Van Oss in an interesting and appropriate type face, as well as her company name but in a smaller font size. Under the header will be a horizontal navigation bar that will have links to Home, About us, Bio, Events, Classic Care, Child Safety, Home Modification, Aging in Place, & OT in the Community. Although we are placing Tracy's contact information in the footer of the website, and her About Us page briefly, it may be important to also have a Contact Us page just incase a user is visiting the website specifically to find out contact information. If a user is coming to the page to do this, it's important that they don't have to navigate through all of the different pages to find this information. Having a Contact Us page will make it clear to the user where to click to receive the information they came to the site for. The website will be media heavy in order to draw in users. Lastly there will be three pages in the site (Ot in the Community, Aging in Place, and Child Safety) that will contain external links leading to outside websites. 

Audience: The audience for Tracy's website will vary according to page. Aging in place will be geared toward the elderly or people who are concerned with the elderly (children of the elderly or grandchild of the elderly) who are looking for a solution that will help allow them to remain in the same house safely. Child safety will be geared towards parents or guardians who want to keep their children safe from ever day hazards. Home modification will be geared toward either the elderly, people with disabilities, or parents/guardians with children trying to make their home safe. 

Design Visuals & Hierarchy: The typography used for the site will be a simple sans serif web-safe font, possibly verdana. The navigation will be in horizontal form which will have Tracy's name in a large font with her company name underneath in a smaller font. 

Schedule for implementation:
October 5th - Design brief and high fidelity wire frames
October 12th - Sitemap & mockup presentations
December 7th - Completed website

inspiration for navigation

Monday, September 26, 2011

Minor Project 9: Read & Blog

In Steve Krug's Don't Make Me Think: A Common Sense Approach to Web Usability, he discusses his first law of usability, "Don't make me think!"  I completely agree with this statement because I hate when I go to a website and can't figure out how to navigate to the information I need.  He then goes on to explain that it is not because people will navigate off of the page because it is frustrating; in fact most people try to find what they are looking for and blame themselves for not being able to find the information and not the site.  He also says that if the navigation is easier and better than the whole website seems better and is viewed in a better light.  It also makes the user feel better about themselves.  

Wednesday, September 14, 2011

Minor Project 5: Read & Blog

Information Architecture: Structural organization of content, it usually has a hierarchy and is easy for users to understand.  I puts information in a form that can be navigated with ease. 

Interaction Design: Shapes the experience of people as they interact with the website it displays the information and gives the user control.


Interface: The tool in which everything is displayed through.

Usability: The ease of the navigating through the design.  

Monday, September 5, 2011

Minor Project 2: Major Project brief. Client: CAS International Working Group

Samantha Baccala and Tashell Thompson

Purpose and Objectives: Without there being room for an actual CAS International Working Group building, there is a need to utilize the web space just as effectively as an office.  The goal is to make global education opportunities an integral part of faculty, student, and staff experience. Making the information easily accessible in the web space is also very important.   

Target Audience: Students and Staff of the Quinnipiac Community who are interested in global education opportunities.

The Core Creative Concept:  An interactive map resides in the background of each page and is enabled when used.  When not being used a transparent box of content will appear over it. 

The Overall Look & Feel:  Casual, Calming, Inviting.  We want to try a minimal approach and not bombard the viewer with unnecessary information. The colors we would use are hues of blue and green because they fit the global idea while also keeping with the cool and calming atmosphere we are trying to create.  We plan to use a San-Serif typeface because San-Serif typefaces are more easily read on websites and computer screens.  

Design Visuals and Hierarchy:  The Design for the entire website would be based on a global map which is interactive on some pages and a background on other tabs that have more informational content.  The tabs would be located on the top left side of the page and would be on a diagonal to conserve space.  A live chat link would open a separate window so that the user could chat while also viewing the page. 

Information Architecture:  We narrowed down the main tabs to Home, About Us, Academics, Multicultural Learning, Blogs, Events, and Multi-Media; in that order.  The Academics tab would include Students, Faculty, Courses, and Scholarship while utilizing the interactive map feature. On the interactive map there will be a filter where the user can tailor the map to what they are interested in.  The Multi-Media tab would contain Game, Media (news), and Resources.

The website is not in use anymore but the design is what helped inspire our design.
There is also a map in the Quinnipiac Magazine which was our first inspiration.