Ignore the error!

test

Test my widget

Module 9 – Design, Wireframes, Story Boards

Design

There's a lot of talk in this about having everything 'above the fold' – interestingly today on the radio say that on the web there is no fold – different people have different browsers, screen resolutions etc so you can never really know where the cutoff line is – and further, people are much more accustomed to scrolling now than they were just a few years ago. That being said, I tried to keep Trip Takers generally within the space that the majority of users would see without scrolling. Certainly the map and main navigation items will be.

I thought it was interesting that they mentioned the 'What If' in relation to travel planning. The functionality to change search options is one of the reasons I use Kayak and will implement it on Trip Takers.

I'm not so worried about restricting data input as the site is specifically geared towards the US.

Well – I guess I'm going to break the pages that link to themselves rule – I want the navigation to be clear and consistent so pretty much all the pages will have a link to themselves. C'est la vie.

 

Wireframes

I'm usually rather anti-wireframe as it seems like an uncessary step – but I found it interesting that the notes said that 'much time and money can be saved in developing a Web site if you can get your client to understand and appreciate the usability of the proposed elements on your site before becoming emotionally involved in the visual style'. I've been developing in a vacume here quite a lot but I can see how this would be useful with clients. I could have used this way back when as I was designing access database programs and clients always got stuck on what color something was going to be and then when it was all put together change their minds. What's that saying – 'Form before Function'.

 

I ended up dividing my navigation into three sections, as suggested. What was interesting was people still wanted there to be some sort of other defining feature. I used different colors.

 

• Use a Hierarchical Structure – Place items of higher importance at the top of the page in easy to find places. Well – I did put the login and start here what would be near the middle of most screens – and the Logo and map at the top. I think this is the best weighting for the site
  
• Text Links in Lists vs in Paragraphs – Better to keep links separate from textual content.
  
  • I have a few links in paragraphs – but they are also navigational links. Better than just telling something like 'we have these great video tutorials' without the link there.
    
• The Home Page Is the Doorway to Your Site – As with feng shui, the entry of your site has the power to make people feel welcome or scare them away. You home page design is very important. Be sure it clearly identifies your site.
  
  • I think the logo/map/navigation clearly does this
    
• Keep Pages Short and Concise – Long scrolling pages are difficult to read online.
  
• Provide a Link to a Site Map on Each Page – This would normally be part of your administrative or utility set of links.
  
  • I don't plan on doing this – with the same navigation on every page it's virtually the same thing
    
• Use Consistent Navigation Cues – Keep your link sets in their same locations on each page. Think about conventions you see in the outside world and how they're consistent followed: road signs, street addresses, page numbers, book indexes, etc..
  
• Use Links Thoughtfully – Label your links using clear and obvious terminology. Bury your external links deep in the site to force visitors to use your site before they leave it. Sending external links to new browser windows allows your visitors to easily pick up where they left off on your site. – I don't know what this means
  
• Test As You Go Along – Even at the wireframe stage, you should be getting feedback from others. Show them your pages and see if they can understand how you use your site.
  

 

 

Story Boards

I do all of my story boards in Power Point and find it's the easiest way to arrange/rearrange things. I might at times be guilty of making them more attractive than the final site will be though.

Module 8 – Search, Logo Design & Flowcharting

I'm a little perplexed as to why these things were lumped together but there you have it.

I've specifically decided not to have a general search function on the site. Users will be able to search for hotels, things to do, directions etc. but these will all be specific tasks in specific locations. I thought that it would probably be confusing to users. Also, none of the other sites which I reviewed had a general search function (except Google – but they're, well – Google). The searches on Trip Takers will return just what the user asked for and be filtered in a certain location.

Logo Design

Ok – so I'm the first to admit that design is not my strong point. Here are the items from the tutorial about logo design, and how I tried to incorporate them into my design.

• A logo must be easily recognizable; it has to be simple and memorable.
  
  • The one negative comment I received about the logo was that the pictures were memorable, but not the name. I enlarged the name a bit – but I think it needs a bit more tweaking to make the name stand out.
    
• The purpose of the logo should influence its form.
  
  • I wanted to convey that it's fun, you'll see beautiful things, and there will be memories. I also wanted it to seem a bit like a scrapbook. By using the pictures in the tilted manner with the frames I hope I conveyed that
    
• There must be contrast and tension.
  
  • The colors and offsetting of the images creates tension and contrast
    
• Interior space and spaces between shapes carry as much weight as the shapes themselves, and all the graphic elements have to form a unit.
  
  • I hope I achieved this.
    
• A logo should be more than a conglomeration of unrelated elements that are held together by a border.
  
  • I didn't want to use a traditional 'border' as it's been done and done again. I like that there is movement from left to right, up and down which corresponds somewhat to the road movement in the right hand picture
    
• Most graphic forms of advertisement are based on or include the logo of the subject
  
• The logo usually appears on letterheads, brochures, labels, packaging, and delivery vans. It may be necessary to render it in varied materials, such as cardboard, plaster, glass, metal, fabric, or even neon.
  

Logo Design Objectives...

• Design Clear & Legible Type
  
  • I believe the text is legible, but maybe not memorable
    
• Create a Distinctive Look
  
  • I think this is distinctive – it's different from any of the other sites – but somehow has that road trip feel to it
    
• Differentiate from Competition
  
• Appropriate for the Business
  
  • It's a fun site, about planning a road trip so I wanted the logo to reflect that
    
• Express Client's Personality
  
  • I'm the client – so that was easy
    
• Aesthetic & Graphic Impact
  
  • Graphically it works very well – I've had lots of compliments on it – people find it striking and engaging
    
• Balance & Unity
  
  • By using three images with the two outer ones being similar in visual weight I believe I've achieved this
    
• Use Positive / Negative Space
  
• Make it Memorable
  
  • The images are memorable – might need to work on the text
    
• Suitable for Color Reproduction
  as well as Black & White
  
  • Well – this just isn't the case with this logo. I would probably do some interpretation of the Trip Takers text for print
    
• Suitable for Small & Large Reproduction
  
• Logos are Subject to Fashion
  

Flowcharting

The flow chart for Trip Takers is actually quite simple. Because the navigation remains the same, and there are a finite number of tasks that can be undertaken there isn't much in the way of involved navigation.

Module Seven – Blind Driving?

So this chapter is basically about accessibility for blind people. I kind of had to laugh at the thought of a blind person planning a road trip. I know, not very pc – but there you have it. In any case, it seems to me that Trip Takers would be quite easy for a blind person to use. First of all, all of the navigation remains the same – once they know where it is they can get straight back to it – and the links are where they would most likely expect them to be. Secondly, there isn't a lot of information which needs to be read in-depth. Quick bursts of information and consistent styling should make for a quite blind accessible site really - and ironically.

As far as CSS goes – I'm a completely tableless web programmer and wouldn't do it any other way – so that's not an issue. I hadn't before considered ensuring that all of the text in the html file flows logically on the page. I suspect I do this anyway but will be certain to check for it in future.

'Skip to Main Content' is something that I would definitely implement in other sites – however with the likelihood of blind people using this site being so slim it would seem to just add unnecessary clutter.

'Make all content accessible by keyboard' – I'll need to look further into this when programming the site. It's an interesting point.

Don't use JavaScript – hmmm – I sort of think that the accessibility hardware/software should catch up. If we don't move forward with new technologies because of a few users than innovation will be thwarted. Sometimes my hardware stops being appropriate for the current software etc I use so I have to upgrade – it seems this should be no different for the blind.

Module Six – Usability Script

Hi [Name],

Welcome to the pre-development user testing for Trip Takers!

First of all I would like to thank you for participating today. User testing is very important as it will enable me to build much more user friendly product.

Secondly, I would like to strongly stress that I am not testing your abilities. It is the product that we are testing, and if you find it difficult or confusing that is not your fault. Feel free to comment on anything and everything.

Now for a few instructions. What you are going to do is to complete a series of questions and tasks for two different websites. During the tasks please talk about what you are doing, why, what you find good, bad, confusing, surprising or that should be different. Anything that pops into your head really.

I have four websites to choose from. Please pick two that you have either no, or limited, experience with. The sites are:

1. Google Maps
   
2. Yahoo! Trip Planner
   
3. Travelocity Road Trip Wizard
   
4. AAA TripTik Travel Planner
   

Which two would you like to test? [Write down Here]

This testing should take approximately 30-45 minutes to complete. We will stop periodically to start a new recording so that the file sizes do not get too large.

First, a couple of question about you.

1. How many hours do you spend a week using the Internet?
   
2. What kinds of things do you generally do while on the Internet?
   
3. What are your three favourite Internet sites?
   
4. Have you ever used the Internet to plan a trip?
   
5. If so, which site did you use?
   
6. How did that go?
   
7. Do you ever share photos or journals of your trips?
   
8. If not, would you if it were easy to add these on to an already created trip?
   

Ok, on to the program. Let's start with [1^st Website]

1. What is your first impression of the site?
   
2. What are the main elements of the page that catch your attention?
   
3. If you were thinking of planning a trip, is it immediately obvious how to do this?
   
4. If not, where would you look?
   
5. 1^st Task – Create a Trip and Save it. (don't forget to tell me what you're doing)
   
6. 2^nd Task - Find and save directions from your town to someplace not too far away you would like to visit.
   
7. 3^rd Task - Find a hotel at that destination and save it
   
8. 4^th Task - Find something to do or see on the way there, and save it to your plan.
   
9. In planning a trip, what is another thing you would like to be able to do?
   
10. Can you see how you might achieve that?
    
11. Are you able to go back after the trip to share photos/journal?
    
12. Is this obvious?
    
13. Does it work how you would like it to work?
    
14. Any other comments or suggestions about this site?
    

Ok, moving on to [Website #2]

1. What is your first impression of the site?
   
2. What are the main elements of the page that catch your attention?
   
3. If you were thinking of planning a trip, is it immediately obvious how to do this?
   
4. If not, where would you look?
   
5. 1^st Task – Create a Trip and Save it.
   
6. 2^nd Task - Find and save directions from your town to someplace not too far away you would like to visit.
   
7. 3^rd Task - Find a hotel at that destination and save it
   
8. 4^th Task - Find something to do or see on the way there, and save it to your plan.
   
9. On [1^st Site], you said you would like to be able to [what they said], can you see how you might be able to achieve that on this site?
   
10. Are you able to go back after the trip to share photos/journal?
    
11. Is this obvious?
    
12. Does it work how you would like it to work?
    
13. Any other comments
    
14. Of the two sites, which did you prefer?
    
15. Why?
    

That's it. Thanks so much for participating in pre-development user testing for Trip Takers.