I came up with three states and removed every UI element that wasn’t needed from each.  I put them into a default WordPress install to give a feel for how the color scheme meshes with a standard web page.

Preload

Play button This and the other buttons imitate Vimeo.  However, the volume and full screen buttons are nerged in the time line to reduce visual clutter (as shown below).  I am unsure of the large, pre-load centered play button that (at the moment) everyone seems to favor.

Mouse movement

Click to enlarge.

Timeline In consideration of Fitt’s law and to reduce visual complexity, I removed the artificial container around the time/loading line.  Maybe I am wrong here, because everyone else includes the odd container:

But this design hasn’t really changed since the early days of Quicktime, and this YouTube UI hasn’t changed much since YouTube began -and they aren’t really known for their visual acumen.

What does concern me is the accessibility of this solution.  I have the eyes of a twenty something  and the screen of designer -what about a woman in her 70′s using a consumer grade monitor she got free with her Dell 10 years ago?  Hell, even my father, who is in his 50′s, would probably struggle to pick out the different shades of gray.  Perhaps there is some formula we can use for minimum contrast for 90+ percent of our usage base?

Load/Buffer Three levels of opacity to indicate the buffer and playhead location.  It is of uniform size as I think the Vimeo style looks odd with the big play button next to it.

Click to enlarge.

Volume Top to bottom indication of volume levels and at the bottom, a mute button/label.  The mute button isn’t shown here as I didn’t have time to change every picture.  When on 0%, the mute label should throb, minimizing the harm of the multiple modal volume system in todays computers.  This goes hand in hand with Rob Cambell’s idea of keeping the volume consistent across movies.

Mouse over controls

Click to Enlarge

Scrubber Just a simple highlighting of the playhead.
Runtime Behind the timeline.
Timecode For both the playhead and the mouse location (when it’s over timeline) the timecode pops out underneath the timeline (I think an animation is parented).  Here I show it above the timeline, but I think it would be less distracting be below the timeline:

Click to enlarge.

The last element is the soft white glow that shows when the controls float above dark elements.

Click to Enlarge

I didn’t mock this up, but I think a pie-menu share button (with c/p, Twitter, email, and Facebook buttons) would be cool.

The big lesson I learned is that an infographic gets a viewer interested but does not try to explain all the details.  My graphic attempted to provide an entire workflow, in addition to explaining the background psychology.  Joe Brewer at Cognitive Psychology Works (a progressive think-tank) and I agreed that it is unlikely any workflow can enable non-professionals to create their own policy framing from scratch.  However, the brochure was very good at explaining the taxation metaphors and we will likely recycle this effort into future, issue-centric, materials.

As to the information itself, my professor commented that, while accurate, she would have liked to see citations.  Left/right has some incorrect information in their graphic and it would be nice to see if they are misinterpreting the information or if they are basing the graphic on a different set of theories.  Citations also increase the perceived authority of the document.

During the usability test, the readers flipped right past the definitions on the gate-fold flaps (see below).  I think this had to do with the inside panels being in color, however, the density of the text is probably the main reason.

Click to Enlarge

A zip with legal and tabloid sized PDFs, along with the original InDesign file, is here.  With the exception of the logo’s, everything is CC-BY-CA, just like Wikipedia.  If you need public domain, just ask.

To produce your own copies, print the PDF on 11×17, trim, and fold or print at ~95% to fit the image on legal-sized paper, trim, and fold.  The screen-shot to the right is a sample print set-up.

When you see the file in PDF, it won’t make much sense.  The final piece is a double gatefold brochure, see below.

]]> http://indolering.com/design/creating-frames/feed/ 0 http://indolering.com/ubiquity/study-done-quick-update/ http://indolering.com/ubiquity/study-done-quick-update/#comments Sun, 21 Feb 2010 22:12:03 +0000 Zachary Lym http://www.indolering.com/?p=387 I finished the documentation/advertising study of Ubiquity back in November.  I haven’t posted anything about it due to a mix of schoolwork and the scholarly journal submission process.  Because journals want to maintain copyright, I can’t publish everything I have written thus far. The journal article has a very different focus from what I will put up in the Moz wiki; once the paper is published I will work with the editors to see what I can and can’t do in the wiki.  Since Mozilla seems to be sleeping on Ubiquity anyway, I will wait to play that dance.

Below is an expert user, a former networking technician for Microsoft and an admin for their XBox Live division whom is familiar with command lines.  He totally missed the command premise, he mistook Ubiquity for the search box, also note how the user doesn’t read the suggestion text.

While trying to customize a skin I accidentally got Ubiquity without any styling… and found it very refreshing.

I also used Enso on my media server and took note of the lite nature of text decorations, syntax highlighting in the text entry field, as well as the auto-completion.

For test 7 I switched the skin to a modified Simpliquity skin with much larger font and a white background.  I also attempted to hack syntax highlighting.  However, I was unable to get delimiter highlighting working in the suggested arguments area in time for the tests.  Never-the-less, it seems to have helped.

The user picked up the command structure immediately.  The user still thinks the optional augments are not optional -a mistake several past participants made as well.  The most minimalist way to solve this is by having a vanilla command and command with optional arguments in the suggestion list, with a fuller explanation in the help text.

email this page

email message to name or email address

User #8 threw a wrench into my theory that syntax highlighting would convey the command and argument structure.  Although he did functionally score better than user 6 it was clear that I prompted him to search for weather in NYC.  Although, if you watch closely, he first types “ne” instead of nyc, mimicking the autosuggets.  Additionally, he also nails the modifier in “email to” after watching the video a second time through.

The confusion from #8 was enough that I tested another person.  Here is a Linux admin, getting it right out of the gate.  Big thanks to satyr for getting delimiter highlighting working!  (It’s in the nightlies, or as an xpi here.)

Users 7 & 9 are Linux users, while 6 & 8 are Windows admins.  Despite all being familiar with command lines, obviously the Linux admins will have a better pre-existing mental model.  Will see if future tests show continue to show an improvement.

Give feedback people!  Even mean feedback!  Especially mean feedback!

Update, Oct 24th

Just noticed that the compressor didn’t provide sound, grrrrr!  Will investigate…

]]> http://indolering.com/ubiquity/sessions6789/feed/ 0 http://indolering.com/ubiquity/summer09-4-5/ http://indolering.com/ubiquity/summer09-4-5/#comments Sat, 05 Sep 2009 20:08:01 +0000 Zachary Lym http://www.indolering.com/?p=202 Couple more sessions using the new translate commercial.

1. Users are unable to tell the difference between the two video clips, so slight differences are a no no.  Repetition may be key as users just don’t have time to digest what happened the first time around and are unable to spot differences between the two clips.
2. Users still see Ubiquity as command specific as opposed to a generalized command framework.  This is despite the generalized example command.

Will try two separate, unrelated commands next time.  The lack of users ability to generalize from the suggestions (despite attempts to do so) is also evidence for code highlighting.  Videos after the jump.

*Update* Here is the latest incarnation, now with real FF Meta!

You need a password for these, email me.

After I updated Ubiq I started getting these reminders notifications:

This is a common UI design pattern, one that is well intentioned but awkward.  About as well intentioned and awkward as the first time I asked a girl out- via “secret admirer” in fifth grade.  Just asking someone on a date is the quickest way to a fake phone number. The girl only knows your interested, not if your worth it.  Hell, she may even know your worth it, but is to distracted with other things.

Just throw it all out there, show the user what is valuable about the command and they will follow along:

Search faster: google search keywords

Secondly stick to seducible moments.  Try a reminder in to Google search-bar auto-suggest, or some extra highlighting of unused commands within ubiquity when opened on related sites.  This is something I touched on earlier in error pages.

I had to cut out about 50% of the content, but anyone interested in the comparison should check out Iron Fists: Branding the 20th-Century Totalitarian State.  It’s an excellent book and my main source.

Anyway, here is a highlight,

The McCain campaign tried to concurrently project the image of both a strong leader and a rebellious maverick.  This strategy made McCain an unconvincing strong father, whom would protect the nation better than Bush as a conservative democrat prone to the nuclear-family view of foreign policy would want.  Whereas a republican with nurturant-parent views of foreign policy would require someone able to work with others- not a maverick whom is unable to work with those in his own party.  Of McCain’s choice for a campaign font Art Chantry opined in a New York Times piece,

“Everything about this logo says you can buy a car from this man.” -Barlow & Highsmith, Boston Globe. McCain’s logo juxtaposed with McCann Motors in Fife WA.

“Optima is the ultimate noncommittal typeface. It’s a sans-serif typeface with the suggestion of false serifs. It’s also a serif typeface without serifs. Either way, it’s a half-truth. Optima is the best typeface for appeal to all viewers and projecting sophistication without really having sophistication.”

How much of this statement was just subconscious reprocessing of the author’s political views in the form of a design critique is debatable.  However, the parallels are striking: the McCain campaign chose a font trying to be both strong and sophisticated while McCain was rushing to embrace the evangelical right-wing while simultaneously trying to both co-opt Obama’s change message and adopt a feminist advocacy angle.

Oh, and the whole paper is BY-SA:

Unchanging PDF

Unchanging Zip

Enjoy : )

At best, a manual can be oriented to predefined tasks and known problems, at worst it is a dense technical read with a broad overview intertwined with nitty-gritty details.  Neither approach considers how people actually work with documentation.  Firstly users never consult a manual unless they encounter a problem they cannot solve on their own.  And even if they do consult some form of help reference,

“[Users] encounter a usability problem on average about once every 75 minutes and typically spend about a minute looking for a solution” -When and How People Seek Help with Computer Applications

I call this the 1st rule  of triage support, a problem or question must be resolved within 60 seconds or it won’t be resolved unless the problem is really bad.  This law explains why Twitter and Get Satisfaction are so successful- users find the most up-to-date answer upfront instead of  guessing which chapter is most likely to contain the desired solution or digging through a forum posts.

Documentation and Help resources need to be thought of in holistic terms, as a part of the user experience spectrum instead of a disparate collection of tools.  To push us closer to that less abstracted understanding we can change the definition to user support. Abandoning the terminology of help and documentation and thinking in terms of user experience and support includes more than just manuals and forums.  This changes the strategic importance of different items, magnifying some things and reducing others.

Don’t think of Documentation

As best psychologists can tell, humans recognize and categorize things in two ways, as described by instance theory and abstraction theory.  Instance theory is that we store a central prototype for a category, with all sub-items being variations upon that prototype- an instance of it. ((Anderson, John. Cognitive Psychology and its Implications. New York: Worth Publishers, 2004.))  I believe we generally think of documentation via the instance method method because documentation also has a literal meaning of recording details and specifications, as in “The case was very well documented” and due to way developers implement documentation resources.

Documentation’s central prototype is a manual, of which there are many variations; wikis, FAQ, knowledge bases, etc.  Thinking in this manner will bring up related help prototypes (through spreading activation) such as a mailing list and it’s variations, such as a forum.  Such thinking prevents us from improving upon the satus-quo, it starts our thought process at a solution and walks backwards into the problem.

Abstraction theory holds that we string together different categories via shared characteristics. What do manuals, wiki’s, FAQ, knowledge bases, mailing lists, forums, GetSatisfaction, IRC, and web-chat all have in common?  What is “documentation” in the context of the user experience?

All of these things are just forms of user support.  I want to talk and think about user support as a collection of actions, products, and features compensating for when the user interface falls short of perfection.  This starts thinking at the problem and designs solutions for it.  Solutions which I call support structures.

I think that this seemingly small tweak in definition leads to big changes in our reasoning- and the effectiveness of support structures saving users from the alpha nature of Ubiquity.

Support Structures

The knowledge base/wiki

If a user fails to find relevant results on their first search, 50% will not search again ((

“47% of the users who failed only tried the search engine a single time. Another 30% tried twice. Less than 25% tried more than twice to get the search engine to produce a successful result…

Now, the designers of many of the sites we tested went to great lengths to get users to continue searching. They put in encouraging search tips that said “Try a new search using different terms.”

However, we did not see any evidence that these tips encouraged any user to search again. They pretty much assumed that the first (maybe second) try was the best they were going to get…

These results indicate that designers get one, possibly two chances to help users find their content with Search. If most of the users don’t find what they want in the first try, it doesn’t seem likely they will ever find it.” -

-People Search Once, Maybe Twice))

Yet most online documentation only offers links or a search box at the end of the page.  Sadly, the user is more likely to work around the problem or drop use of a feature -like Taskfox,

For these work-around episodes, the mean task time was 20 minutes and the median task time was 10 minutes. We estimate that use of available functions, had the participants known of them, would have reduced task times by 75 percent. -When and How People Seek Help with Computer Applications

So why not try to engage the user by offering a GSFN submission or chat support at the bottom of every page?

Click to enlarge

The Herd

The herd delivers information about a command, will show up high in google searches for the command, and will get a lot more traffic than any knowledge base we erect.  So why not make examples editable and sync them with the knowledge base?

Click to enlarge

This is extremely evolutionary, re-purposing material in pre-existing support structures.  It’s not a technological leap but a cognitive one.  Just as Ubiquity is only a cognitive leap- using a very old interface in places where it’s best suited for a task.

Error Pages

A seducible moment is when a user’s goal changes from performing their primary task to fixing the whatever is preventing them from accomplishing their primary task.

Google found that by placing the spell correction feature not only at the top, but also at the bottom of a search they were able to double it’s usage.  Users skimmed over what could have helped them originally because it was at the top.

Error pages could exploit this by offering a “best effort” landing page along with re-purposed knowledge-base materials.

Guided Exploration

Only a fraction of users have add-ons  due to the high barrier of actually adding them.  If we don’t just automatically add top-tier 3rd party commands we could at least offer them up on error pages.

However, we are limiting ourselves.  Google has replaced bookmarks, Wolfram is attempting to solve problems, and Bing wants to answer questions.  Isn’t Ubiquity not only a shortcut for these functions but also a replacement?  Why not embed suggestions where it is relevant, be it landing pages, a custom search page, or within the website itself?  Normal Google searches through Ubiquity could be redirected to a customized Google Custom Search page re-skinned with some JS magic:

Click to enlarge

This might seem hokey, and it’s effectiveness would be very limited in getting new commands onto Ubiquity.  But think of how the click-through rates and keywords from this “feature” can be used to improve the parsers logic.  User support isn’t just about teaching users, it’s a part of the user experience, it’s part of the testing cycle which improves Ubiquity.

Developer Support Structures

A more complex interface (such as MediaWiki, Trac, and Merc) filters out users who probably shouldn’t be patching code, logging bugs, or writing developer documentation.

However, the core developers are overworked trying to get the parser working,  internationalize it, integrate Taskfox, architect Jet Pack, design the UI, and help out on other Mozilla projects.  As a result, the core commands (among other things) have gone stale.  Commands are simple enough that even transient volunteers could improve them immensely.

I think a modified rule for these smaller items could be “Contributing shouldn’t take more than 60 seconds.”  Quality code takes longer than a minute- but hasn’t everyone found themselves spending hours on Wikipedia when they meant to just fix a minor thing?  Even hosting the commands on as individual GitHub projects would go long way towards increasing their exposure.

~

Please, leave negative feedback as well, challenge whatever I have to say.  I don’t get much feedback other than general “good job” stuff.  Not being a programmer, in mountain view, or being as visible as I could be really limits my understanding of the broader picture.  I often wonder if what I am doing is what what is most beneficial, or if I should change tactics or focus.  Take a moment to help me correct that : )

It’s also here and here, if Vimeo decides to yank the video.

I don’t really need to make it perfect for my closed tests.  If I were doing this for a real ad I would have a single, flowing sequence like search on Craigslist, check prices on Ebay, email it to a friend, and  insert a map.  I am working out some compression issues so I can put the iMovie project online to make remixing easier if you are interested.  Suggestions are welcomed in the interim : )