Final Thoughts

It is the final two weeks of the unit and I feel I have learned about issues that will help me considerably in my other design units. Fortunately I have 3 more design units to do and will certainly use the kills I have learned here to overall improve my future website designs.

I think this unit is so fundamental to website design that I am wondering why this unit was not recommended as the first design unit.
I think I was fortunate enough to have studied this unit with a great group of people, great friends!

My tutors were as always first class, but I wouldn’t expect any less from Curtin tutors (no suck-up intended guys).

I have just submitted my final documentation assignment and will submit the cover page for this one shortly. I am now off to prepare for NED24 next SP. I am told it is going to be a bit complicated. I just hope I will get a chance to build a website where I can put my usability skills to practice.

Page Design Tests

I did the page design tests on the employees of the same office but this time I selected members of another department because I thought the previous participants already had an idea of what my project is about and the ‘Get it’ test will not be done properly.

The ‘Get it’ test was successful, everyone got it right! I guess I made sure the site is clear enough after my usability test participants had so much trouble guessing the purpose of the 3 websites I chose.
I generally wanted to know if they understood what the website does and where or how to find information on it. I also asked them their preferred place to start, which was the main menu for most of them.
For privacy reasons I have covered the names of the test participants here but the final documentation does have the complete scans of the page design test papers. You may click on the images to get a closer look.

Card Sorting Results

I should have posted these results a while ago but here they are.
I have separated each top-level category in columns and the rows display the cards that were sorted out by the test participants. The numbers next to each card-row indicate how many participants placed the card under a particular category.


Only a few pages were sorted into categories I did not intend them for, but overall most of the cards were sorted as I expected. Although it was a good learning experience I did not use the results in my final report.
Initially I intended to design a dropdown menu for the site but then I analysed the results of the usability tests and almost everyone liked the menu to the side where they could see all the categories organised in one section. Therefore I changed the style of the menu and since only the top level categories of the menu will be displayed the card sorting results were not used except for one category that was explained in the storyboards.

Final Home Page Storyboard

This may be the final storyboard for the Home page. I have distributed this design on paper with some questions to the same office workers that I surveyed for my research proposal report. The questions are general ‘Get it’ questions and guessing where to find things on this website.

Final Wireframe for Home Page

This is a slightly different version. It still has all the essentials and the searchability of the first design. The only thing different is the header image and I have decided to remove all the ads.

Second Level Pages Storyboards

First Storyboard

This is how the Home page will look and feel. I am not really sure about the whole design I may definitely change it now.

Early Wireframe for Home page

This is just the digital version of my initial home page design. I may change the design several times until the final version is developed however there will be 4 levels of searchability and they are:

• The main menu
• The search box
• The programmatic A-Z search
• And breadcrumbs to enable the users trace back steps and know where they are.
  
  
  
  

Card Sorting Video

Card Sorting Tests

I have conducted my card sorting tests but am yet to analyse the results. I think most test participants organised the cards similarly. In just one of the tests two cards remained unsorted as the participant was not sure which category they belonged to. I had already explained to the participants to leave whatever they think cannot be sorted under the existing categories in the left hand side window.
I have attached the screenshots of the completed tests. It shows the cards already sorted out. I will also try and upload the recording of one of the card sorting sessions, if I can.

First Home Page Sketch

As the final assignment is near, I have started with the design phase of my proposed website.

This is only the first rough sketch for the Home page. It shows where everything will be positioned. There is the logo and tagline, the search facilities including a search box and the A-Z programmatic search. Also the menu will list all major categories. The right hand side will have some advertisements. The middle of the page will list all the new businesses added to the directory since a specified date and the footer will have utilities such as sitemap, about us and/or contact us links.

Card Sorting Video

Since I finished my usability tests last week and I already had Camtasia Studio 5 installed on my computer as an evaluation copy, with only few days left of my evaluation period, I decided to do some card sorting tests and record them as well.

So I again asked all my test participants this week to do the card sorting tests. I may have to do some evaluation of the card sorting results before I can make anything out of it. I have asked Edwin and Marika if I could include the videos on the usability tests DVD since I will not be sending in a CD or DVD for the last assignment. If it was decided that I should not include the card sorting tests on the DVD I will try and post a few cuts of the videos here on this blog.

I hope it works as I never tried posting a video on any of my blogs before!

The Videos Length! May Create a Problem...

I am a bit worried after I reviewed my usability test videos. I think they may be just a little short. I know the assignment requirements do not mention how long each test should last but I think Marika mentioned on the discussion board that they need to be half an hour long. I was so busy with other aspects of the tests that I forgot to think about the time. Also, there is not much to do on my proposed websites. The only thing the users can do is search for a business and they did. I think I did however find many problems with the websites that may just save me from this time limit issue.

My Usability test 3

Test 3 went fine but with few changes. First of all my test participant asked me to read the test script for him before he started the test so when it came to the actual test I didn’t really read the whole script, just the important points. Once again the nerves got the best of me and I did jumble some words.

I also decided to let the user roam around a little on his own and I didn’t really stick to the script very tightly. I think it worked well.

My Usability Test 2

The highlighted test script worked!
I didn’t sound like a robot and was much calmer, as I predicted. My test participant was also more cooperative and once I explained that I want to find out how these websites work he pretty much went on his own and found most of the problems I didn’t even realise they were there on the websites.
He also expressed his opinion about other features like colour and layout etc, which would help with designing the aesthetics of my website.

Just a note about this blog

I record usability issues and assignment related activities as it happens at different times in a Word document but they are all uploaded into this blog when I get the chance and few extra minutes in a day. This will explain why my posts’ time stump make them look like they have been written in bunches.

One Solution

This time I have highlighted the key words and the beginning of each sentence in my test script for the second test. I think this way I may be able to read calmly and it will help me not to miss any important points I want my participant to know.

My Usability Test 1

My first usability test was a near disaster. I jumbled words and read the test script as if I was reading the constitution; point-by-point.
I was so nervous I couldn’t read my test script properly. The words were there but I couldn’t see them.
I forgot to ask two questions and remembered them near the end, I had to take my test participant back to the other two websites and ask him the questions I forgot.
I also had to cut a sneeze, or was it a cough?, from the final video. As requested by my test participant of course.

Overall, a good first time experience!

Omit Needless Words

I absolutely agree with Krug! I usually don’t bother read those welcome blurbs etc but this poor website is way past just needless words. I would also say, PLEASE, omit needless colour, images, icons, tables and...

Hum, you be the judge!

Animal, vegetable or mineral?

This is Krug’s chapter 4 on website usability. Basically what it means is that visitors should not be forced to think long about what a link represents before clicking on it.
I went online and found plenty of websites, particularly Microsoft website that made me think a lot.




But this is one website I found that don’t make any sense to me at all. I am not sure if it is a web page or a website. It says Welcome to the Seekonk Police Home Page, but there are no links to more pages. The only link on this page is an email link for contact; well at least they have a contact link!
But seriously, this site is terrible!

and Krug says,

Breakup pages into clearly defined areas
Ok, I will forget about the ugly background, the menu, the colourful text, and the little images spinning, turning and flashing around. I will also disregard the use of the frame and just say; it does not have clearly defined areas!


http://www.bldsa.org.uk/

Krug says,,,,

Create visual hierarchy
According to Krug, website visitors should distinguish between the site’s most important feature and the less important features just by looking at it. Usually the most important feature is placed closer to the top of the page, is bolder, bigger and or in a different colour to the rest of the site’s features.

This website is unable to tell me where I should be clicking first and where to click second. It holds a list of identical links that annoyingly expands and reveals a little image alongside a description and other links that the user would not expect them to be there.

http://www.brown.edu/

Krug says,,,

Follow conventions
What are conventions?
On websites, conventions are the position, size, colour, appearance etc of features that web users are familiar with already and that don’t make users think.
For example you know that on most websites the menu is on the left while advertisements are on the right of the page. If these two change positions they will create confusion and make users think.

There are quite a few conventions to follow in web design and this website has almost certainly broken all of them.

http://www.jonespartners.com/

Krug says,,

Keep the noise down
I think anyone would agree with me on this website. It has got noise, lots of noise, ugly noise, but what about the noise that follows you?

HELP! GIANT EYES ARE FOLLOWING ME!

Once again, screen dump won’t work here. Visit the link at your own risk! Eyes may follow your every move.

http://www.tallyhouniforms.com/

Krug says,

Make obvious what is clickable

Ok, I agree with Krug on this one. I hate to visit sites where I have to move my cursor around the page until it turns to a hand in order to find a link. But this page has gone out of its way to make obvious what is clickable. Pasting a screen dump of the site will not work here, you just have to go there and see for yourself.

I do apologise for sending you there, but, here is the link anyway,
http://web.archive.org/web/20060613061524/http://moire.ch/



Conversely this website has not made it clear enough what is clickable. You see that the page headings and menu links have the same background images. At first, I did click on the headings but they are not links.

http://www.intlhomefash.com/index2.html

Don’t make me Think! It is Krug’s first law of usability

Krug says web pages should be self evident, obvious, self explanatory.



Web Pages that Suck introduced me to this beauty that really made me think. In fact, I am still thinking.

http://www.snarg.net/fraf_quang/squeee_quang/index5.html

Survey Questions

I used this resource as a guide for my questionnaire design.

This document basically covers every part of designing questionnaires from defining the research to types of questions and methods of conducting the survey.

I was aiming to collect the following data:
· Where do these people access their Internet?
· How many survey respondents have used a web directory before?
· If they have used an online business directory before, did they experience any difficulty using it?
· Was there a favourite feature?
· Whether they have used an online business directory or not, will they be willing to use one that is specifically designed and lists the local businesses in their area?

Survey Design

The Steps in my Survey Design Project

Establishing the goals of the survey
I wanted to learn what features people use more on a web directory. The choices I provided for my survey respondents were;
· Using the search box
· The navigation system
· The A-Z categories or none of the above


Determining the survey sample
I chose to distribute my survey questionnaire to some colleagues of my husband in his office.
The reason I chose this particular location and group was that these office employees are located where most of the businesses are. They go out to lunch, run errands and/or visit local dentists etc in the same area that I am building the directory for.


Determining the survey method
The survey questionnaires were printed on two sheets of A4 paper with a total of 12 questions and a few lines extra for comments.


Creating my questionnaire
See next post


Pre-testing my questionnaire
I asked some family and friends to read and then try and answer the questionnaire in order to identify any major flaws.


Distributing the survey
The survey questionnaires were distributed to each participant individually.

DON’T MAKE ME THINK!

I absolutely love reading our set text for this unit. Don’t make me think by Steve Krug is just one of those books that I read when I am really bored and almost fallen asleep with those scholarly papers translated from French, and have lost half of their meaning in translation, to wake me up.

It is the common sense of designing sensible websites that I have never thought about. It really does make sense but never looked important to me before.

I wish I had done this unit before my two earlier design units NED11 and 12. Maybe OUA has to work on the order of units and recommend this unit before other NEDs.

PS: only NET35 has those boring papers translated from other languages. I will celebrate when I finish that unit. Same was the case with REA11.

Card Sorting

I will be using CardSort http://www.cardsort.net/downloads.html for the card sorting usability test. Camtasia will record how the test participant is going to sort all the categories.
It is very easy to use and requires little HD space. You do need to have JRE (Java Runtime Environment) on your computer for it to work, nevertheless not a major requirement.


This is how you set it up:
When you start the tool you have two options. Sort cards and create/edit cardset.
You start with create cardset.

Here you can create categories on the right and the cards that will go under each category on the left. Name everything and save the file.

For the actual testing, restart the tool and this time in the main window select Sort Cards. It will assume that the user is the tester this time and ask you for a name so that the results can be sorted later.
Here you just open the file you saved earlier and the tester can start sorting the cards. The white colour cards from the left are dragged by the tester to the right side under the orange colour categories.
It beats manual card making, naming and sorting. And best of all, my tutors will be able to watch the card sorting in action and listen to what the tester has to say about them. I hope they are good at voice analysis :)

Usability Test Recording

I have decided to take Steve Krug’s advice and use Camtasia Studio Screen Recorder for my usability testing. It has a 30 day trial version. It records both user actions on the screen and audio.
http://www.techsmith.com/camtasia.asp?CMP=KgoogleCStmhome

It has lots of very useful features. It also lets me collate all my testing videos and create a clickable Flash-like menu for them. Editing is also made easy and the free trial version has no restrictions. How good is that?

Module 4 task

See what other newspaper images you can find online and see what design practices make them easy to read. Which newspapers seem easier to read? Why? What conventions can you find?


The Times Online from UK
I like this website. It displays a big image of the most important news of the day followed by a slightly smaller headline and then few smaller headlines to show the hierarchy of news from the most important to the less important in comparison.
http://www.timesonline.co.uk/tol/news/


My rating for this site: 5 out of 10






BBC News
It does display news article according to their significance, sections are visually divided very well but the feature I find very useful in such a large site is the little map on top of the section menu under the logo. It is clickable and visitors can easily switch to view news in another region in the world.
http://news.bbc.co.uk/


My rating for this site: 6 out of 10





News.com.au
This is my favourite of the 3 websites. There are clear visual clues of what is the most important news of the day. Again, each article is placed in a good hierarchical order to show what is important after the main story. Another usable feature is the list of breaking news. most stories have little images next to them and this gives a visual clue to what the visitor might be interested in or not interested in. All sections are divided clearly into different categories, there is less chance of getting lost.

One of the things I hate about news sites is that they display a video like it is an image and when you click on it there is a video and it starts automatically. News.com.au has a separate list for videos with a heading and little ‘play video’ signs on each image, makes my live easier!

http://www.news.com.au/


My rating for this site: 8 out of 10

Three similar websites

The 3 similar (in design or function) websites are;

1. Ottawa Web Directory dot com http://www.ottawawebdirectory.com/

This site has categorized all the sections very well but has failed to organise it properly on the home page. I think this could have been done better on the left side where most main menu are located but only after they have been generalised a bit more. Right now there are too many categories to fit into any menu structure.

My favourite features are;
· The colour scheme
· The search box, it is clearly identified by the word Search. Also the options or searching the whole web or only the directory is given so that the visitor will know which one is being searched.
· The New listings and Hot listings
· The option of rating the businesses
· The Directory Statistics section

2. Just Derbyshire

http://www.justderbyshire.co.uk/index.php

This site has a nice colour scheme. It makes it clear what the site is about and provides some extra resources and external links, although all of the external links I checked were opening in new browser windows, which explains why their XHTML validation fails.

What I like about this site is how when you click on one of the businesses the details are displayed in the section right next to it. It makes it easier for the user to just select another business if the address seems a bit too far for example.

3. The Streets Network

http://www.streetsofsydney.com.au/

This must be my favourite site among the 3, and no I am not biased because I live in Sydney. I like the colour scheme. I may design something close to it. The categories make sense to me.

Although there is quite a lot of information displayed on every page, particularly on home page, it still manages to look clean and sleek. It provides all the features I want to include in my design, a search box, the A-Z categories and a properly categorized menu.

To top it all up, the site provides very helpful breadcrumbs. I love breadcrumbs. They make it so easy to see how deep the visitor has gone into the site and can just jump back a step or two easily.

It should however warn the visitor when a link is taking him/her out and into an external website.

The Portal/Directory

The website will provide visitors with a list of businesses in Parramatta with their addresses, contact information and website links, if they have one.
The list will be categorised so that visitors will be able to find what they are looking for more efficiently. A search box will also be provided and the A-Z categories will be another addition to the search-ability of the site.

Thinking of the project

I was asked by a friend who owns a business if I can build a website portal for the local businesses in my area. From what I know of business portals they are search oriented and will require quite a lot of planning and research.

NED23 has presented me with this opportunity where I can focus on the basics of researching solutions and designing the site without being caught in the coding and styling, which normally consumes too much time than to allow for proper planning.

So for this unit I have decided to design a business portal/directory for Parramatta area in Sydney’s inner west. I have discussed the project with Marika and Edwin, although I have not received any response yet, I will assume they are ok with it.

Usability Research Scrapbook

This blog is a digital substitute to the required Research Scrapbook for unit NED23 - Internet Design – Usability with Curtin University of Technology. Here I will record the ongoing Usability testing for my proposed final website.