Building Usable Websites: A Discussion of Navigation

By On September 21, 2009 · Leave a Comment

Tonight’s topic is web navigation. Details are here: http://www.techmaine.com/civicrm/event/info?reset=1&id=93

Got here late and hungry–there’s no pizza tonight! The presenter, Mabel Ney, will post her slides, so I can catch up with that.

Link recommended for user persona discussion: http://www.cooper.com/

Site organization

Each bit of content or page, get’s a post-it note. Find a big wall [...]

Tonight’s topic is web navigation. Details are here: http://www.techmaine.com/civicrm/event/info?reset=1&id=93

Got here late and hungry–there’s no pizza tonight! The presenter, Mabel Ney, will post her slides, so I can catch up with that.

Link recommended for user persona discussion: http://www.cooper.com/

Site organization

Each bit of content or page, get’s a post-it note. Find a big wall and get idealized users of the system to help sort the post-its. Try to do it in 30 minutes with 3-5 participants from each audience segment.

Sample Sorting

Mabel presented list of items to sort as an example. The items looked to me like flavors, but the list included sunflowers! The intention was flavors of ice cream, but without a context, the sorting was difficult.

Navigational Models

Suggested mint.com as a site with hierarchical navigation. You go down into features, and then back up. There’s a lot of content (check the sitemap). But this content flows nicely into a hierarchical model. Ande Mabel loves the copy-writing.

NYC transit map example

This is a metaphor for different navigational systems. I.e product search is like the express train.

Idexx site (idexx.com)

Related link model

Musicovery

A competitor to Pandora. Interesting navigation. It’s very graphical. You can choose era, mood, range of time, or genre. It’s as if you get to your stop and then can jump to different dimensions.

MyRecipes

More different ways of looking at navigation that are, in some ways, content centric.

How to determine the navigation scheme

how deep do you need to go?

how savy are your users?

what is the nature of the content?

Measuring

Review documents

Vision statement validation

Persona validation

5 second test

User testing

Heuristic review

What is a 5 second test?

Are key messages & links readily seen?

Allow participants to view page for 5 seconds

Answers in less than 10 minutes

Patterns emerge with very few users

onebythefive.com

I remember: logo, bed, sleep, menu, purple, night time,

I felt: curious feeling

Mabel asked users to explain what they saw and felt. The goal is to determine if the vision statement is reflected in users impressions.

Marriot Site jdvhotels.com/tomo

I remember: Joie de vivre, pictures that I couldn’t interpret easily, Hotel Tomo

I felt: irritated by the clutter

thepodhotel.com

I remember: Young people, the word “Pod”, washed out colors

I felt: confused by number of images, confused about whether this was a hotel or ipod customization technique

Usability Evaluations

What are strengths & weaknesses

Do research, get users

Minimum of 3 per segment

Settings may vary

Allow developers and product stakeholders to observe

Did “speed dating” quickly using different example sites

Mabel’s office performs weekly focus groups. Other times they perform analysis in houses. People are often motivated by free pizza!

Question: What do you ask users?

Answer: For example, for pets and tics, asked users for historical medical information. Then asked user to try using the website to solve the problem. Try to get user to perform a task that they are actually interested in.

Usability Preparation

Recruiting participants: get interested people, reate script, schedule, sometimes provide pre-work (example for site was to ask users to write an example of the best day with kids; to bring favorite kids book)

Script the session: create a welcome script, define tasks and rankings, create a thank you script

Usability Session

Report and rank findings

Work with development team

Update personas

Heuristic Review

What can we fix without recruiting users

Expert review best performed by experts

Maine IXDA provides feedback

Vision Statement Template

For:

Who are seeking:

Our product is:

That provides:

Unlike:

We have:

More sites

http://boxesandarrows.com

http://adaptivepath.com (includes webinars)

http://uie.com (includes webinars)

http://useit.com

 

SSH with Keys HOWTO: SSH with Keys in a console window

By On August 20, 2009 · Leave a Comment

When setting up passwordless logins I always seem to miss a step. The following link is a useful resource.

SSH with Keys HOWTO: SSH with Keys in a console window.

When setting up passwordless logins I always seem to miss a step. The following link is a useful resource.

SSH with Keys HOWTO: SSH with Keys in a console window.

 

Find Last Month’s Date, or DateAdd with MS SQL

By On August 19, 2009 · Leave a Comment

I need to find all the records that were last modified more than one month ago, and delete them. How do I create the date dynamically with MS SQL?

dateadd(month, -1, current_timestamp)

To see it in action run this:

select dateadd(month, -1, current_timestamp)

For more information, see the MS docs: http://msdn.microsoft.com/en-us/library/ms186819.aspx

I need to find all the records that were last modified more than one month ago, and delete them. How do I create the date dynamically with MS SQL?

dateadd(month, -1, current_timestamp)

To see it in action run this:

select dateadd(month, -1, current_timestamp)

For more information, see the MS docs: http://msdn.microsoft.com/en-us/library/ms186819.aspx

 

Remove SVN From Directory Tree

By On August 12, 2009 · Leave a Comment

This little script will remove all SVN dirs from a directory tree:

find . -name “.svn” -type d -exec rm -rf {} \;

Credit to http://snippets.dzone.com/posts/show/2486

This little script will remove all SVN dirs from a directory tree:

find . -name “.svn” -type d -exec rm -rf {} \;

Credit to http://snippets.dzone.com/posts/show/2486

 

Converting Time to Decimal Values in Excel

By On May 6, 2009 · Leave a Comment

While creating a time sheet for a client today I encountered a problem I’ve seen in the past: how to convert a time value to a decimal in excel. For some reason, the time tracking tool I use, paymo, doesn’t include time spent on a task, just the start and end dates.

Here’s [...]

While creating a time sheet for a client today I encountered a problem I’ve seen in the past: how to convert a time value to a decimal in excel. For some reason, the time tracking tool I use, paymo, doesn’t include time spent on a task, just the start and end dates.

Here’s the formula I used to convert the time value to a decimal:

(HOUR(A1)*60+MINUTE(A1))/60

Unfortunately, I’m not yet smart enough to have come up with this myself. I got it from the link below.

Converting Time to Decimal Values.

Tagged with:
 

IntelliJ JavaDoc Error: javadoc: error – Illegal package name: “”

By On May 5, 2009 · Leave a Comment

Today I was generating JavaDoc from withing IntelliJ idea, and I saw this error:

javadoc: error – Illegal package name: “”

I tracked it down here: http://www.jetbrains.net/jira/browse/IDEA-11773 and discovered it was the result of spaces in the name of paths in the class path. IMHO idea should be escaping spaces. But it doesn’t.

My [...]

Today I was generating JavaDoc from withing IntelliJ idea, and I saw this error:

javadoc: error – Illegal package name: “”

I tracked it down here: http://www.jetbrains.net/jira/browse/IDEA-11773 and discovered it was the result of spaces in the name of paths in the class path. IMHO idea should be escaping spaces. But it doesn’t.

My short term solution was to put the command from idea into a shell script and modify it there. What’s irritating about this is that the paths in question were IntelliJ’s own installation page. In my case:

/Applications/IntelliJ\ IDEA 8.1.app/lib/j2ee.jar

Ugh. So I can move the install dir for IntelliJ, provided that doesn’t cause additional problems, I should be OK.

Update: at least part of the problem was that I was javadoc’ing a package that included only groovy classes. When I excluded that package, things worked well again.

Tagged with:
 

ImageMagick Resize Batch with Bash

By On May 1, 2009 · Leave a Comment

Converting and resizing from source files to web-ready files is easy with ImageMagick. Searching the web, I was able to put together this little script that saves a lot of time over the alternative (using photoshop batch processing).

#!/bin/sh IMAGE_TYPE=jpg SRC=src-images for file in $SRC/* do filename=${file%.tif} filename=${filename/src-images\//} echo “converting $file to $filename” convert $file [...]

Converting and resizing from source files to web-ready files is easy with ImageMagick. Searching the web, I was able to put together this little script that saves a lot of time over the alternative (using photoshop batch processing).


#!/bin/sh

IMAGE_TYPE=jpg
SRC=src-images

for file in $SRC/*
do
        filename=${file%.tif}
        filename=${filename/src-images\//}
        echo "converting $file to $filename"
        convert $file -resize 500 covers/products_lg/$filename.$IMAGE_TYPE
        convert $file -resize 200 covers/products_med/$filename.$IMAGE_TYPE
        convert $file -resize 72 covers/products_sm/$filename.$IMAGE_TYPE
done

Anyone know how I can simplify that nasty regex: filename=${filename/src-images\//}

I don’t want to hard-code in the dir name. Unfortunately, I don’t have time to master bash now. I’ll live, and even be quite happy, which this current solution.

Tagged with:
 

Java Tip: Zipping a Directory

By On May 1, 2009 · Leave a Comment

Some times the easy stuff requires custom code. Searching the web I found a few examples. This one was the most promising, but it has some typos: Example Dir Zip.

So I rolled my own. Note that I use commons logging. If you don’t use logging, just remove the log statements.

Also note [...]

Some times the easy stuff requires custom code. Searching the web I found a few examples. This one was the most promising, but it has some typos: Example Dir Zip.

So I rolled my own. Note that I use commons logging. If you don’t use logging, just remove the log statements.

Also note bad source or destination errors are silently swallowed. I will probably change this.

Also, it doesn’t do any sort of locking. Probably at a minimum the destination file should be locked.


/**
	 * Zips the directory and all contents from dir into a file named
	 * filename
	 *
	 * @param dirPath path of directory to zip; must exist
	 * @param filename filename to store contents
	 */
	public static void zipDir(String dirPath, String filename) {
		File dir = new File(dirPath);
		if (!dir.isDirectory()) {
			log.error(dirPath + " is not a directory");
			return;
		}

		ZipOutputStream out = null;

		try {
			log.trace("Creating : " + filename);
			out = new ZipOutputStream(new FileOutputStream(filename));
			addDir(dir, out);

		} catch (IOException e) {
			log.error(e);

		} finally {
			if (out != null) {
				try {
					out.close();
				} catch (IOException e) {
					log.error("failed to close output file: " + filename, e);
				}
			}
		}

	}

	private static void addDir(File dir, ZipOutputStream out)
			throws IOException {
		byte[] tmpBuf = new byte[1024];

		// add each file
		// if file is a directory, move into it and add all contents recursively
		// until done
		for (File file : dir.listFiles()) {
			if (file.isDirectory()) {
				addDir(file, out);
				continue;
			}

			FileInputStream in = new FileInputStream(file.getAbsolutePath());
			log.trace("Adding: " + file.getAbsolutePath());

			out.putNextEntry(new ZipEntry(file.getAbsolutePath()));

			// Transfer from the file to the ZIP file
			int len;
			while ((len = in.read(tmpBuf)) > 0) {
				out.write(tmpBuf, 0, len);
			}

			// Complete the entry
			out.closeEntry();
			in.close();
		}
	}
Tagged with:
 

Read from a file using a BufferedReader – A Java Code Example

By On April 29, 2009 · 2 Comments

I know I should know how to read a file with Java, but old dogs die hard, or something. At any rate, I found a great example that even works. I got the code from here:

Read from a file using a BufferedReader – A Java Code Example.

And here’s what I came up [...]

I know I should know how to read a file with Java, but old dogs die hard, or something. At any rate, I found a great example that even works. I got the code from here:

Read from a file using a BufferedReader – A Java Code Example.

And here’s what I came up with:


public static String readFileToString(String fileName) {

        BufferedReader bufferedReader = null;
		StringBuffer output = new StringBuffer();
        try {
            bufferedReader = new BufferedReader(new FileReader(fileName));

            String line = null;
			String delim = "";
            while ((line = bufferedReader.readLine()) != null) {
	            output.append(delim);
	            output.append(line);
	            delim = "\n";
            }

        } catch (FileNotFoundException ex) {
	        log.error(ex);
        } catch (IOException ex) {
	        log.error(ex);
        } finally {

            //Close the BufferedReader
            try {
                if (bufferedReader != null) {
	                bufferedReader.close();
                }
            } catch (IOException ex) {
                log.error(ex);
            }
        }
		return output.toString();
	}

Update: After thinking about this a little more I decided to use the Apache Commons FileUtils class to do the work for me. It simplifies things a little.


	public static String readFileToString(File pInputFile) {
		try {
			return FileUtils.readFileToString(pInputFile, "ISO-8859-1");
		} catch (IOException e) {
			log.error(e);
		}
	}

My question to my readers is, how is the best way to write test case for file reading? Any takers?

(image by As Good)

Tagged with:
 

Balsamiq Studios Mockup App

By On March 31, 2009 · Leave a Comment

Today I discovered Balsamiq Mockups, a web mockup application. I’ll be reviewing it in more detail shortly, and learning it well enough to make a presentation at the local web developers user group. I’ve been doing web design for a long time and creating mockups has always felt inefficient. [...]

Today I discovered Balsamiq Mockups, a web mockup application. I’ll be reviewing it in more detail shortly, and learning it well enough to make a presentation at the local web developers user group. I’ve been doing web design for a long time and creating mockups has always felt inefficient. At first blush, I’m attracted to the pencil sketh look and feel and comprehensive palette. It’s important that clients not get too attached to the mockups, so the sketchiness is really appealing.