Interaction design: Museums best practices: Holocaust Museum

Assignment
You, your mother (75 years old; with bad knees; sweet old lady, with a great sense of humor and interest in anything that he grandson is interested in) and your 15 year old (energetic and mercurial) son, Josh, are planning to visit XXXX city and go to XXXX museum for a 4 hour visit. You need to make sure that the trip to the museum will go well, so try to plan for any and all disasters before hand.
A few potential disasters or concerns:
Mom stresses about traffic and parking. She will nag you increasingly every minute that you circle a block looking for a space. What is the parking situation?
Mom's knees tend to ache after standing for awhile. She will want a wheelchair or to go back to the hotel. Can you get her a wheelchair?
Josh is bored by 'old-fogey stuff'. Is there a contemporary or bleeding edge exhibit that will win cool points in Josh' eyes - and how would you know if it is cool enough?
Josh always loves to eat and mom is happy to pay. Is there a restaurant/food option that might be attractive to both of them? Is it a cafeteria or a restaurant? Price?
Tour guides / audio tours... maybe you should get one of these and just not worry about keeping everyone happy. What's available? How much? Do you need to reserve in advance?
Is there really enough to see here for a 4 hour visit? Or should you plan for other events in the area - what else is close by?
Are there special events or performances that you should plan your visit around.

My best practices site is the United States Holocaust Memorial Museum. I've been there twice and am familiar with the area, so should have a feel for whether whatever advice I find is likely to be accurate.

I'm going to be looking for quick access to the following information:

1. Parking and traffic


2. Handicapped access


3. An appealing exhibit for a male teen


4. Onsite food info


5. Tour guides/audio guides


6. How much time can you spend there


7. What's nearby of interest


8. Any special exhibits at the museum

I start with the index page, which has enormous white space (well actually blue and white) on the left and right, so the site appears quite open:

The top Navbar appears quite useful, with a mouseover submenu that's just what the doctor ordered for my family visit.

19 menu choices appear on the "Museum info" slot, including the potential helpers "Plan a visit, hours, directions", "museum cafe", "Exhibition information" a FAQ, and contact info. Excellent navigation, this menu is front and center. Next step, see how many of my questions will get answered right away.

I start by going to the plan a visit page, which looks like it has the potential for getting me started

PARKING AND TRAFFIC

Wow, a "getting here and parking" link that has info that should calm down mom. There's a map with a blowup inset and a detail on parking that will let us know about wheelchairs:

"Parking: The Museum has no public parking facility. There is a paid parking lot at 12th and C St., SW (east of the Museum) which costs approximately $4 per hour, and hourly metered parking along Independence Ave. Area public lots fill early in the day, and street parking is restricted. There is no street or lot parking west of the Museum. Expect to walk three to five blocks to the Museum entrance if you choose to bring your car. Staff are ready to facilitate passenger drop off at the driveway by the 14th St. entrance for visitors needing personal assistance. There is also limited, four-hour bus parking available at D and 14th Streets. Accessible public parking: For vehicles bearing the appropriate access tags, the National Park Service has designated approximately ten accessible parking spaces at and around the Washington Monument, along Independence Avenue west of 14th St., and at the Tidal Basin parking lot."

How could we ask for more information?

ACCESSIBILITY

Two bites at this apple, a detailed page on accessibility that summarizes things nicely, and for those that obsess about it, a 26-page downloadable accessibility guide that's in .pdf. The site does not make the mistake of only offering this as a .pdf. The accessibility page told me right off that wheelchairs are available from the Check Room (wherever that is). The FAQ page tells me "Museum facilities are accessible to persons with physical disabilities. Elevators serve all areas, and each exhibition incorporates program accommodations (films are subtitled in English, and audio-only portions have text accompaniments). Wheelchairs and some visual aids may be borrowed at the Check Room free of charge."

CUTTING EDGE EXHIBITS

The museum's easily findable exhibition webpage carefully lays out all the exhibits. I'm sure the exhibit "Give Me Your Children: Voices from the Lodz Ghetto" will appeal to my teen son.

ONSITE FOOD

The top menu bar has an easily recognizable link to the Museum Cafe', with a menu and an online order form. Yum!

TOUR AND AUDIO GUIDES

The FAQ page tells the user "The Guided Highlights program offers tours to all interested visually impaired, blind, and blind-deaf individuals and their friends and families. The three-hour tours cover highlights from the Museum's Permanent Exhibition, using visually descriptive language, tactile reproductions of objects and architectural elements, and visual aids. Please make reservations for the tours at least two weeks in advance. Tours can be arranged for any day the Museum is open for times before 1:30 p.m."

HOW MUCH TIME CAN YOU SPEND

The easily findable FAQ page tells me "It can take several hours to see the entire exhibition, and most visitors spend about two hours. Selectively viewing the exhibition can reduce time. Visitors are free to explore the exhibition at their own pace... What if I only have an hour to visit? What can I see? While the Permanent Exhibition can take over two hours to visit, there are a number of other exhibitions, displays and resources you can visit for as little or as much time as you might have available. No entry passes are necessary for any of the items listed..."

The navigation and layout of the Holocaust Museum website is very appealing, especially given the somber nature of the exhibitions. The interface is wonderful, and easily navigable. The interactions design keep you on the site and tells you where you area.

Kudos to the web designers. Now, off to find a museum with a bad interface.

week 12: interaction design;Ultimate Toobars

The David Pogue podcast on TedTalks was enlightening. My favorite illustration of the absurdity of design elements carried to an ultimate was his illustration of what the screen of Microsoft Word would look like if you open all the toolbars. Not much room to type! Here it is:


(screenshot above from the podcast)
You could do it yourself at home by opening MSWord and going to the view>toolbars menu. The default has only 3 of the 20+ available toolbars active.

week 11: grids in bills at the NCGA

At the General Assembly, the documents I produce all have a simple grid structure, with four basic horizontal frames:
1) top of bill, includes the year of session, edition number, bill number, and history.
2) sponsor's name(s), separated by a horizontal line
3) committee referral (if any), separated by a horizontal line
4) text of bill, separated by a horizontal lines

All bills at the North Carolina General Assembly (of which we have produced over 2,500 this year) have the same identical structure, so the document is easily identifiable. Members, staff, and lobbyists all are used to the same structure, which was used in an identical manner when I got here 30 years ago.

UPDATE March 28, 2007:
Wait a minute, here's the document I should have posted, since the instructor is on the SILS faculty! Notice that one of the grid segments (sponsors) expands in size to fit the contents:

week 10: Activity centered design: online portfolio

ONLINE PORTFOLIO MANAGER AT USATODAY.COM:

Easy enough that a caveman can do it?

My activity centered design is setting up a portfolio at USAToday.com to track my investments. I know that a lot of news websites offer this feature to encourage site loyalty, but I did not know if USAToday.com offered one.

Sketching out the steps
I assumed the activity would begin with:
1) locating my holdings
2) getting the correct names of the stock and mutual funds
3) Finding out how many shares I wonder, and possibly even date of acquistion if the site tracked historical values
4) figuring out the stcok symbols, hopefully there will be a lookup engine
5) finding the feature at the website

and end with worrying even more about my holdings, rather than being blissfully ignorant of the stock market.

I hope that it will be easy!
------------------

Actual steps:
1) go to USAToday.com website

2) make a guess that the feature will be at "Money" so I click on the green Money menu bar on the upper left, getting me to the Money front.

3) Nothing on the first page visible, so I scroll down and just below I find:

Interesting way to present this. How did they get my portfolio already?? :)

4) I reach the instruction page by clocking on "log in here" and get:
"Welcome to USATODAY.com’s Portfolio sign-in page
Please choose one of the following:
1 - If you already have a USATODAY.com stock or mutual fund portfolio, sign in here.
2 - If you are a new user, start here to create your free USATODAY.com stock and mutual fund portfolios.If you don’t receive a confirmation e-mail in a timely manner, check your SpamFilter or Junk Mail folder. In some cases, Confirmation e-mails will get caught there. When you find it, just click on the link to confirm your registration.If you have a question or a problem, please go to: feedback.usatoday.com. "

5) I click on "new user", put in my selected user name and password, and go off to await a verification email.

6) By the time I log into my email, the verification email has already arrived. It avoided my spam filter. Yay! Here's what it says:
"Thank you for signing up for a USATODAY.com Portfolio! Please validate your e-mail address by clicking the link below in order to activate your Portfolio. [link deleted] If you are unable to access the above link from this e-mail, please copy and then paste the URL into the address field of your browser. If you do not confirm your e-mail address your Portfolio will not be achieved.Please Note:If you received this in error, and were not creating an e-mail address for your Portfolio on USATODAY.com.com, please accept our apologies. Disregard this e-mail and the Portfolio will be deactivated for this e-mail address after 15 days. "
Well designed!

7) click on the link, page returns "Thank you, your e-mail address has been successfully validated. Click here to log in"

8) Log in is easy, next screen is part 1 of 3 (as opposed to the wedding announcement page at the Roanoke Times that had six steps and my classmate thinks will drive off users) and I think most investors are willing to go through three steps


"Create a Portfolio (Step 1 of 3)

1 Enter a Portfolio Name:
You can have up to 10 portfolios. Create one at a time.
Choose a cash position preference: No cash position Cash position Initial Cash Amount $
About the Cash Position This is optional. Choose a cash position if you want to start your portfolio with a specific amount of money. Then, the initial cash amount you enter will change as you "buy" and "sell" stocks in your portfolio. "

[cash position, hah, it's too late in the month] This page is well designed for the user.
I name my portfolio "Gerry" and tell it I have $45 in cash (A $20 bill, $20 worth of the new Washington dollars, and five ones)

9) I'm at step 2:

"Create a Portfolio (Step 2 of 3)

2 Enter stocks or funds:
Enter stock or fund symbols (separated by spaces):
Symbol Lookup "[good, a symbol lookup, but this assumes some level of knowledge, what's a stock symbol?] "enter all of your ticker symbols at once. " [ouch, poor design, I'm going to have to write them down, can't cut and paste one at a time, poor design] .

Here's the lookup feature entry point (click on picture to get magnified view):

here's what I try -- "Disney", this returns "DCQCL - NYSE" this can't be correct, NYSE has one, two or three letters, so I try "Walt Disney" and get DIS, "United Parcel Service" and get UPS (sounds right), "Marriott" and get
MAR
Marriott Intl Inc New; and finally a mutual fund, "Evergreen" and get a list of 100 funds, find the correct one
EABFX
Evergreen Asset AllB FUND

so now I have gathered DIS, UPS, MAR and EABFX, back to the entry screen
Bad, I've wandered off somewhere, there seems to be no link back to the portfolio creation screen, try back three times, there it is.

type in DIS UPS MAR EABFX

10) I'm at step 3 and get this screen with the holding names prefilled, and it asks for purchase date, # of shares, and purchase price. (I don't know the purchase price, I'll try leaving that blank for three of the items, and I'll put in dates on two. I'm making up all this info. I then hit the "finish" button. I wonder why if I give the purchase date of the stock, their database can't look up the value on date of purchase?

I discover there are lots of different views to choose from, as well as "create custom view" "launch portfolio tracker" and "download to spreadsheet"

Process completed. here's one view of my fictitious portfolio (click on picture to get magnified view):

ACTIVITY CENTERED DESIGN
Using Saffer's analysis structure, I'd say the USAToday portfolio trakcer is an Activity-Centered Design. The designers focused on the tasks at hand, not on how the user would interact with them (User centered design). There were clearly a few steps NOT well user-tested, especially entering the ticker symbols and understaning the process involved. There were no easily visible help options. The location of the feature had very little emphasis on the site. Still, an attractive option for users. It would appear that USAToday.com had outsourced the production of the online protfolio to marketwatch, which might have caused some of the problems with integrating my progress through the process with where I was on the site. Interesting the outsourcing, I think one of the other class blogs for this week noted that the newspaper obit site they were searching had outsourced the feature to legacy.com.

week 9: banner created

Went into photoshop, took the image that I had on the earlier post and used it as the image for my banner, color picked the Carolina blue, reduced the opacity to make it lighter, added text in Onyx after picking the same dark blue color, added the border from Rameses, and uploaded it here. Now, I need to figure out how to make it the banner on the top of my blog.

By the way, the Carolina Blue border spilling into the letter "O" of "OLINA" was not intentional, but is a good transition and pulls you into the banner.

UPDATE: Done! Just went on my dashboard to "Page elements" and linked to the picture, it's now my banner. Someone had suggested I get rid of the awful color at the top of my blog, so I edited my CSS to get rid of that image, and it was replaced by the Rameses color.

week 9: My palette

I had to reinvent the wheel. In my post below, I showed how I modified the CSS of my blog to incorporate three colors from a picture that showed my emotion (Go Heels!) I forgot to actually create and post the palette I used. I went back to the picture, used color picker, and of course I couldn't remember exactly where I had picked the colors, so I got close -- you will notice that the color hexadecimals are not the same as listed in the post, but they are close enough for government work. I went into Photoshop, watched Serena's tutorial, and voila, palette above.

UPDATE: I am sort sort of moron. I had posted the exact hexadecimals for my three colors in an earlier post. In photoshop I just needed to paste these into color picker and I would have had the EXACT colors. Oh, well.

Carolina blue palette

I took the image from my last post, pasted it into Photoshop, cropped it and magnified it to show the individual colors. Highlighted here are several shades of blue (with Carolina blue in the lower right), and some of Rameses.

I started with one of the readings for this week "Create a template color scheme using a photograph" I took an image, and posted it to my blog so you can see what I started with. I then pasted it into photoshop, cropped a small area, blew it up, did a screen print, pasted it back into photoshop, cropped it, and saved it as a .jpg. This is my color palette, which I also posted to my blog per instructions. Back in Photoshop, I used the eyedropper, and sampled Carolina blue (a5bede), the darker blue border (102049) and Rameses (8c9684). I cliked OFF web colors only. I went into my blogger account dashboard, and went to edit the html on my template. Under body, I edited the background hexadecimal to be background:#102049; deleting a linked .jpg file as well. This is now my outer border, the deep blue. For Rameses, I added a subtle thin wrapper
#outer-wrapper { background-color:#8C9684;
then to get the main emphasis for my blog, Carolina blue, i edited in my main color
#wrap2 { width:700px; background:#A5BEDE;

I did not change any of the widths in any of these settings, and deleted any extraneous linked background files.
wow, I've edited my CSS

UPDATE:

Well, I finally got around to watching Serena's two tutorials on how to create a color palette, and discover I did it a different way and did not actually post my palette to my blog, so next week I'll go back and post my palette (as opposed to posting a swatch of the origin photo above!) I'll probably go and add the silver from the school colors to my pallette as well!!)