Quick Fix: Microsoft Wireless Keyboard keys are wrong

Two nights ago my brother touched my Microsoft Wireless Keyboard 1000 and BAM the key mappings completely messed themselves up. The space bar was typing ‘G’ and Backspace became ‘R’ and ‘d’ was ‘/’ and so on. Every key was typing the wrong key (or modifier, leading to several accidental browser window closures).

Much online advice is centred around going to Regional and Language Settings to check that the correct keyboard is selected, but in my case the solution was much simpler: after fiddling around for a while and considering replacing the battery, I paired the keyboard with the base station again and everything was good. It’s an obvious solution, really, and I felt a bit sheepish afterwards for not having realized earlier.

Exact instructions vary, but usually you press a button on the base station followed by a button on the keyboard. In my case the button lives on the back of the keyboard – it’s an unassuming little grey push-button.

Designing according to implementation models and why you should think twice about it

Today I wrote an answer on UX Stack Exchange that I thought I’d share here with a bit of extra elaboration. The questioner was seeking design suggestions for menu organization in a lightweight music player program. Here’s the UI the developer initially created (imagine this as a right-click menu):

credit: ‘Glenn1234′

Not the most intuitive (and in fact rather confusing) interface around! I was confused by the seeming duplication of ‘Jukebox Controls > Load Media’ and ‘File Controls > Load’, so the questioner clarified that ‘Load Media’ was for this function:

take a collection of music files and select specific files based on certain criteria and play them continually until the user stops the program

while plain old ‘Load’ was supposed to do this.

select/load specific files on demand.

Now the problem starts to become apparent. The ‘Load’ vs. ‘Load Media’ issue is just the most obvious symptom of what is going on here: the current menu was built around the implementation model of the program; that is to say, the way the music player actually works, from a technical perspective.

Translating literally from functions in code to functions in the UI is often an easy option – each control basically has to trigger a function in the code, clean and simple – and often will seem to make perfect sense to the developer. My guess is that the thinking often goes:

  • My code can do X, Y and Z.
  • The user interface to my code should let the user do X, Y and Z.
  • Hence my user interface should display X, Y and Z.

This looks sensible enough, but let’s replace X, Y and Z with some example features for a program that…let’s say I want a program that will delete all occurrences of the phrase ‘help im realy sleepy’ from an essay that I wrote too late at night. This is the only thing that the program is supposed to do (presumably ‘help im realy sleepy’ happens a lot) and all I want is to make my essay presentable as quickly as possible because it was due half an hour ago. This isn’t the most realistic example, but it gets the point across:

  • My code can select all occurrences of ‘help im realy sleepy’, delete selected text, and save the file.
  • The user interface to my code should let the user select all occurrences of ‘help im realy sleepy’, delete selected text, and save the file.
  • Hence my user interface should display buttons that let the user select all occurrences of ‘help im realy sleepy’, delete selected text, and save the file.

Let’s see how that goes…

4r1b4

Designing by the implementation model.

Hmm. A bit iffy. What’s wrong here?

Let’s go back to our friend with the music player. I’m guessing that someone using the program really just wants to load some music and start listening to their favorite songs. (Of course, you’d want to back this with user research, if possible.) This is the mental model of the user – the way the user thinks the system works or should work. Not how you, as a developer, know it works.

And the mental model is what needs to be designed for.

Likewise, a user doesn’t care if the music player program has two functions called loadFileset() and loadOneFile() in its code. In fact, the music player could make use of loadWAVFile() and loadMP3File() and a million other functions and the user wouldn’t care nor want to see them in the UI. Recall that ‘Load Media’ and ‘Load’ both implement the basic functionality of ‘load some music’. So why doesn’t the menu just get rid of the confusing duplicate and give me a way to load some music – whether one song or many – so I can start listening already?

The actual suggestion I gave in my answer was that the program’s functions seemed to fall into three logical groups:

  1. Load Music
  2. Play Music
  3. Settings (and stuff like About and Exit and whatever)

…so I would start reorganizing/thinking about my menu items from there. I would also argue that prev/next belong with the player controls instead of file controls. When playing music, files become tracks to users – they’re no longer just a bunch of .mp3 and .wma and .ogg files in a directory; they all become pieces of music and should be treated accordingly.

Here’s a last illustration with the fictional essay-cleanup tool discussed earlier. Remember the user of this program? She has an overdue essay, knows what exactly needs to be removed, and needs it done fast. Below is a possible way to simplify the UI so that the whole process better aligns with the mental model of ‘I’ll give this program my essay, press a button, and it will attempt to save me from my professor’s wrath’. We could even combine the De-sleepify and Save buttons. In fact, we could make the program automatically compose a grovelling apology email with the essay attached when you click the button. You get the idea.

cdi54

(Hopefully) designing by the mental model.


Background reading on implementation, representation and mental models:http://www.uxpassion.com/blog/strategy-concepts/implementation-mental-representation-models-ux-user-experience…although the diagram there is definitely stolen from somewhere – I can’t remember which book; possibly About Face 3 by Alan Cooper (can someone verify? let me know in the comments)

I’m back, again

I’ve been dusting off my old social media properties in the past few weeks. There are some that I’ve kept active over the years because they require minimal effort or have become critical: Goodreads (stats about books! no word-nerd could say no to that), Facebook. But at some point writing a blog became both a hassle and a liability, so I stopped. Until recently, when I started wanting somewhere a bit less transient than Facebook for sharing my thoughts.

So. If you’ve been around since the start, you’ll notice that this blog has a new name: Jess Writes Words (I don’t call myself a creative for nothing). I’ve tidied up the categories a bit, to reflect the new scope I have planned for the blog; new ones include User Experience and Releases.

Because I’m already a nostalgic sap at the tender age of 19, I’ve also left some old posts up. These were made between 2006 and 2010 and include:

  • the ‘Quick Fix’ software how-to posts that have supplied a steady stream of traffic even after I stopped blogging regularly (thanks guys!)
  • an essay done in 2008 about persuasive techniques in Al Gore’s An Inconvenient Truth, which I receive a grateful email or comment from time to time about – always from an Australian student. Australia, time to shuffle up the curriculum a bit?
  • old art and photography – it’s always cheering to see that I’ve progressed some over the years.

Well, I’m back.

Front End Resource Library

The following is a list of resources that I’ve found helpful for finding my way around web front end development. This post is updated from time to time. Last update: 9 July 2013

General/comprehensive docs

Javascript

OpenLayers

Painting in 7 Easy Steps

Bear with me: this is a constant gripe of mine. Still, whenever I see something like this going on and get annoyed, I remind myself how much more I’m learning by not giving in to the photocopy machine ethos, and I feel a bit better (not that it will last when my result slip comes back with a ‘C’)


I have no issue with photo reference. I think photography is an amazingly liberating and helpful tool for all kinds of artists. What I do dislike is copying the photo blindly without taking into consideration the intent of the piece.

A Recipe for Instant Art

You will need:

  • A camera, preferably digital
  • An overhead projector (optional)
  • Models (optional)
  • Lights (optional, strongly encouraged)
  • Pencil (2B) or thin vine charcoal
  • Paint (oil is best to ensure the final work has an artsy flair)
  • Support (canvas preferred)

Preparation Time: 1 day ~ 3 weeks

Procedure:

  1. Come up with a concept, and shoehorn it into a contemporary context – preferably one which you have easy access to (e.g. your messy kitchen).
  2. Draw three thumbnails and pick the one you like most.
  3. Scout for a location and conduct a photo shoot. If you considered lighting in step 2, arrange lights as necessary prior to shoot and do not experiment with lighting once shoot has commenced. If done correctly, you should leave with precisely one sharp, well-focused image.
  4. Make A4 print of image. If using a digital camera, be sure to print with an office color laser printer and ensure that a strange color shift is present before proceeding to next step.
  5. Proceed to paint image onto support. A paint-by-numbers approach is especially useful. Cropping is allowed but only use if absolutely necessary (e.g. you have ordered the wrong size of canvas). Take care to copy your photograph slavishly and always draw contours, not three-dimensional forms! Remember to follow the colors of the photograph as closely as you can. Doing otherwise diminishes the verisimilitude of your final piece.
  6. Allow painting to dry. In the meantime, you should write an artist’s statement about the painting. Include two or more of the following words/phrases for maximum impact: “mimetic”, “built environment”, “contemporary”, “disengagement”, “appropriation”, “question”, “social mores”.
  7. Exhibit and win awards at contemporary art shows.

The following steps can be performed between steps 4 and 5. They are optional, but they will shorten the preparation time drastically, especially if you are not a skilled draughtsman.

  1. Make print of image onto projector slide.
  2. Project image onto canvas.
  3. Using pencil or charcoal, carefully trace outline of photograph – including highlight and shadow areas – until you have something that resembles a contour map.
  4. Seal line drawing to avoid accidental smudging while painting.

Common Problems

Q. I started painting, but realized that I don’t have a good ‘feel’ for my subject. Should I do some studies to familiarize myself with it?

A. Resist the temptation. Extraneous studies will only slow you down. If producing the painting for school examinations, you may be required to produce studies; in this case, avail yourself of a lightbox. Remember the Golden Rule: copy contour, don’t think about form.

Q. I’ve started analyzing the scene I’m painting! I’ve come up with ideas for lighting and edge treatment to convey the forms and concepts more clearly (I think). Should I still follow the photograph?

A. Yes. You do not want to waste all the effort you have put in so far.

EMBclient Release

Yujian and I have just finished work on EMBclient. It’s a little program that grabs announcements from our school’s online notice board system, with offline caching for messages that you’ll need to refer frequently to, and it syncs with the (horrendously ugly) web version because it can.

I didn’t actually code (I tried though!), just helped get it from this:


To this:

A substantial improvement, if you ask me. Could be better, of course, but…

Anyway, you can get EMBclient from http://bit.ly/getembclient or look for it on SourceForge.