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.

Module Five

I didn't have anyone available to do this testing with. It's a great disadvantage for this course to live somewhere far from friends and family. Even though we've lived here for quite some time, there really aren't many people I would feel comfortable asking to help me with this.

I did gleen some insight into how things should be organized while doing the user testing. I had some problem with coming up with one particular heading which I eventually called 'Stay & Play' which hopefully encompasses for the user the idea that they would find places to stay and things to do in that section.

Module 4 – Billboard Designing 101

http://www.stcroixrods.com/

I looked at the name in the top middle first – then the pictures – then the name again at the bottom. It was actually a little difficult to look at the menu – not even sure what they were. It certainly wasn't inviting

http://www.audiusa.com/

The name Audi America first, then the logo, then the cars that moved into view in the middle.

 

http://www.tazo.com/

Splash screen – some crap about the site appearing in a pop-up window (you what?!?!?!) – Click Here to enter. Three things I hate – hardly enticing – and I love tea. Against my better judgement I had a look inside – all flash – all the text was images so it looked crap – it made sounds without warning – hard to find stuff. Ick!

http://www.funerals-ripoffs.org/

I finally gave up trying to find anything which could be clicked on. Aargh.

 

http://www.elementk.com/

	http://www.digitalthink.com/	http://www.elementk.com/	http://www.madxs.com/	http://www.virtualflowers.com/
What draws your eye - 1st, 2nd, 3rd?	Not a lot	"Your Learning Solutions Partner", "Course Catalogue", Logo	Nothing – hard to see past the glaring red crap on the sides	"Send Virtual Flowers", "Send Real Flowers", "Send Virtual or Real Flowers"
Note if something draws your eye again - or causes you to avert your eyes	It's all very insipid	Bottom colourful menus draw attention	The red graphic on the side made me want to leave immediately	The flashing "or Real Flowers" is annoying
What role is white space playing?	?	I don't really look at the stuff with white back	Background for red text making it hard to read	Backdrop for the images which is very nice
Can you determine if the design is intentionally directing your eye? How?	I guess the logo – which says they 'outthink and outdo'. The first item on the first menu is the CEO message. Makes me think they think an aweful lot of themselves	Seems like they are trying to draw you down to the 'Course Catalogue' 'Demo Center' and 'Contact Us'	I don't think so – I don't know where to look	They are definitely trying to get attention with the flashing thing.
What is the purpose of this site?	Corporate consulting	They provide some sort of learning software	OMG – they are a branding company.	Order real or virtual flowers.
Is this site of value to you? Would it be of value to anyone else? Why?	Not to me	They seem to offer online courses on just about anything. I've worked for companies that offered access to this kind of repository and found it useful	Not to me – I wouldn't use them based on this site. I'm surprised any one else would either.	I guess – if you wanted to send flowers. I'm not sure about virtual flowers – seems to defeat the purpose.
How is this site organized?	Drop down menus at the top with a lot of extensions.	Main menu at the top, with subsequent left-side menus	Not well	The utilitarian stuff at the top, and the product listing down the side. I looked for product listing at the top first
How does it work? How are people supposed to use it?	Seems like you would kind of need to know already that they do something you need. I wouldn't spend a lot of time looking around it	I guess you're supposed to be able to see the extent of what they offer. I couldn't find any prices though – or indication if it's something you would purchase for an entire corporation, or if you could get a single user license	You're meant to click on one of the types of branding and then click on an example which brings up (yet another) pop up box.	Either pick Virtual flowers to send as an email or real ones.
How long did it take for your partner to figure out what the site was about, or "Get It"?	Longer than all the others.	About 2 minutes to figure out that they were showing what they provide, and that you have to contact them to get any further information.	A few minutes after getting over the shock. Then a few minutes of head scratching and querying how people make a living doing such crap.	Less than 10 seconds

Module Three – How we Really Use the Web

Three Facts of Life

#1 – We don't read, we scan

#2 – We don't make the 'best' choice, we take the first reasonable choice

#3 – We don't figure it out, we muddle through

So the idea is to basically make excellent billboards – make it so that users will find what they are looking for in an efficient manner.

Interestingly Krug states that the Back button is the most used feature in a browser.

How Users Read on the Web: http://www.useit.com/alertbox/9710a.html

 

Best to use concise, scannable text with objective language.

Focus Groups

Have studied these in another class. Would be handy to hold a focus group but I don't know enough people where I live to do this. I am going to do a survey with a bunch of family and friends from around the world to test out my chosen sites. They will try to recreate the same trip (which I provide, or they make themselves) on all three and then report on each one via the survey. Should be interesting.

Not sure how I'll do the video testing as I don't know many people around here.

Module Two - Market Research

This module covers the basics of usability. I've created a list of questions to answer before creating a site which I will include in my usability report.

Pre-Development Questions

1. Why is this site being developed?
   
2. Who will come to your site?
   
3. When and why should those people come?
   
4. What, at the very least, do users need to be able to do?
   
5. What sort of limitations might the user have?
   
6. What are your users preferences as far as sophistication, plug-ins etc.
   
7. What are your users current habits when using similar websites that can be incorporated to make the site easier to use
   
8. How do your users currently complete the task your website will help them with
   
9. What do users hate about currently available systems?
   
10. What is the profile of your users?
    

Usability Objectives

1. Easy to learn.
   
2. Efficient to use.
   
3. Easy to remember on subsequent visits.
   
4. Satisfying, with a minimum number of errors as users go through the site.
   

Usability Testing Cycle

1. ask
   
2. test
   
3. retest
   

Don't Make Me Think

1. Make it obvious
   
2. Make sure it's obvious what can be clicked on
   
3. Eliminate the question marks!
   
4. If not obvious then at least self-explanatory
   

Microsoft's Useability Testing
Risden, K. (1999). Toward usable browse hierarchies for the Web. In Bullinger, H. and Ziegler, J. (Eds.) Human Computer Interaction: Ergonomics and User Interfaces, 1, 1098-1102.

Basically the crux of this article was that when designing a browse heirarchy the more general and similar terms used to describe categories are, the more confusing they are for users.

Dziadosz, S. and Chandrasekar, R. (2002) Do Thumbnail Previews Help Users Make Better Relevance Decisions about Web Search Results? In Proceedings of SIGIR 2002, Conference on Research and Development in Information Retrieval (Tempere, Finland, August 11-15, 2002), ACM Press, 365-366.

this article concluded that it is better to have both text and a preview image of relavent search results than either alone.

Market Research

So, the site I'm thinking about doing is for planning and blogging Road Trips. I have personally yet to find one that even first of all recognizes that your starting destination, and your finishing destination are more often than not one and the same - it might be an airport, or your home, or a city you are visiting that you're taking a few days break from, but only rarely is someone planning to end up somewhere else. Also, many seem to want you to share your trip with the world - personally, I like to send information to a few friends/family but I don't need to broadcast it to the world. Also, I want to be able to store all my reservations (which I didn't have to make via that site), calculate out costs - including gas, tolls, hotels etc, map out stops, blog each stop and add pictures to it. I'd like to basically have a map which shows where you are on the road trip - maybe across the bottom of the page - and then you can either scroll through the trip (with a cool little car moving along the map - ok, not necessary - but fun :) or click on a stop to see information. All the reservations would be available in one section, all the photos in another.

There seem to be a lot out there that help you find out stuff to do, where to go, eat, stay etc. - and I'm sure for many people that is important. But I think there must be other people out there like me who would like to be able to put together a nifty, interactive website of their travels.

Now - I guess the main thing I need to do is find out if anyone else has this issue -and if perhaps they would like to have a solution to this problem. So, on to designing a questionnaire. Having done this in a previous unit I'm fairly confident of my abilities to do so. I'm not sure where I will find people to take it though. I've found a few message boards on Road Trips so will hit them up first.

I did find a site at http://www.roadtripamerica.com/travelplanning/userguidefree.htm#rta which rated the top road trip sites. Although most of them were purely planning tools, not travel blogging tools as well. In any case, None of them recieved 5*

I then started looking at travel blog sites - some of these contained some of the missing elements of the road trip sites, although many of them are more aimed at blogging for sharing with everyone so that others can find out information about a particular area. Although this is, I'm sure, of great interest to many. It's not quite what I'm looking to do.

I also started to think about a lot of these travel sites being geared towards international travel. I think my focus is going to be American Road Trips. First of all - there is soooo much to see here in America. Secondly - there is a great tradition of road trips in America. Thirdly - even as gas prices get more expensive, flying is becoming even more expensive - especially for families. I think the great American road trip will become even more important. Although I said earlier that I wasn't so much looking for it to be a social networking site. I would like to see it be a repository where people might find out information about places by reading other's posts on that place.

I also don't want it to be all about booking travel through the site. I think with simple affiliate links to some of the travel sites I use - and perhaps some way to automatically add my affiliate ID's to links from posts - say someone is looking at another post and the person stayed at the Ruby's Best Western at Bryce Canyon. If they think, oh I'll book that too, then when they click on it they will go to the Best Western site with my affiliate id attached. But I digress....

So, looking back at those pre-development questions. Preliminarily, without doing any actual research, here's what I think...

• Why is this site being developed?
  
  • To provide a way for people to both plan and share their American road trips. There are sites which exist that do one or the other quite well. But none that do both exceptionally.
    
• Who will come to your site?
  
  • People who are planning road trips
    
  • people following someone elses roadtrip
    
  • people who are looking for roadtrip ideas
    
  • people who are reminiscing about road trips they have taken
    
• When and why should those people come?
  
  • People who are planning road trips should come because they will be able to research, document, map and share their plans. The site will allow for multiple people to be involved in the planning process.
    
• What, at the very least, do users need to be able to do?
  
  • Map the places they want to go
    
  • Insert information links for activities
    
  • Insert bookings for hotels/attractions etc.
    
  • Blog with images attached to particular places
    
  • Print out the itinerary
    
  • Share the trip
    
• What sort of limitations might the user have?
  
  • Limited computer skills
    
• What are your users preferences as far as sophistication, plug-ins etc.
  
  • I would say things which are commonly included within a standard browser. I would prefer to stay away from anything which would require specialized plug-ins as I would imagine many older people would use the service
    
• What are your users current habits when using similar websites that can be incorporated to make the site easier to use
  
  • Searching for hotels (maybe integrate Kayak)
    
  • Entering Blog posts (maybe integrate blogger)
    
• How do your users currently complete the task your website will help them with
  
  • I think there are two types of users. One who uses a roadtrip site to plan it, and one that uses travel blogs to share the trip/photos etc.
    
  • Planners – some use sites such as AAA or RandMcNally. They research what they are going to do, where they are going to stay etc. and then print it all out.
    
  • Bloggers – may plan beforehand but blog the trip seperatly. Some may do this on paper, rather than on computer. Pictures may or may not be linked to particular sites/evenets.
    
• What do users hate about currently available systems?
  
  • Personally I hate that it's very difficult to find all the information I need, compile it into one place, share it with others and then add text/information/ratings for things we did. We do a lot of family road trips where there are more than one family involved and choices need to be made about different options etc. This is difficult with the others. Even Yahoo which does allow for a lot of this functionality is difficult to use. I would never sent my in-laws to a Yahoo site as they would just be overwhelmed.
    
  • The lack of obvious grouping or progression.
    
• What is the profile of your users?
  
  • Mother's of school aged children who plan the summer road trip
    
  • Seniors who are in retirement and are travelling via RV
    
  • College aged kids
    
  • Young married couples without kids
    

Ok – so I've looked at the most popular sites and am going to focus on three which meet some of my requirements.

AAA - TripTik

Yahoo TripPlanner

RealTravel

Module One

So first up - the links in the module to Tipping Jakob's Lader and Wait for It don't work. No great surprise as this is a very common usability issue in WebCT.

I found Tipping Jakob's Ladder at http://www.webmonkey.com/webmonkey/01/26/index1a.html?tw=commentary - I couldn't find the Wait For It article

Tipping Jakob's Ladder - I thought this was a great article having previously felt myself that Jakob Neilson was a bit out of touch with the realities of website design in modern times. Although myself often not a fan of flash sites the author does a great job refuting Neilson's claims that Flash is 99% bad by showing that it is really the designers - or the clients - who create bad design. Basically it seems as though Neilson hasn't an actual clue about Flash and so, other than the fact that he's Neilson, his opinions on the matter would probably have not been even considered as Flash developers would have dismissed them out of hand in the first place.

User Interface Engineering: I found a great article here which introduced me to the idea of 'Pogo Sticking' - "pogosticking is when the user jumps up and down in the hierarchy of the site, hoping they'll eventually hit the content they desire". Interestingly it said that %66 of purchases on ecommerce sites happened without pogo-sticking - and the more of this that was done, the less likely the person was likely to purchase.

Also, when given a list of items people generally automatically assume that the first is the most important.

Unfortunatly the article didn't give much in the way of suggestions for avoiding this.

10 Things I Hate About the Web

1. Links that don't work
2. Sites that are slow to load
3. Cluttered sites
4. Site searches which don't find what I'm looking for (even though it's there somewhere)
5. Store sites without prices.
6. Splash screens
7. Websites designed just to rank on Google that are just a list of links
8. Flouro colors
9. Resizing my browser window
10. Spam
    

5 Things I Love about the Web

1. Accessibility of information
2. Being able to keep in touch with friends/family around the web
3. Availability of programs & tools - often opensource and free
4. Ability to do university degree in Australia from Colorado :)
5. Being able to work from home