UX thing

Learning to prototype in code pt 1: considering options

One of my UX resolutions for 2012 was to learn how to prototype effectively in code. So lets get started, it's almost February already! Chop chop!

Pondering my options in Q&A format: 

What does it mean to prototype in code? 
To me it means making test interfaces out of HTML, with as much real-world interactivity built-in as possible, to make a prototype good enough to test with users. 

No wait, why prototype at all?
Lots of reasons - read this for some. http://www.scottberkun.com/essays/12-the-art-of-ui-prototyping/ 

Why "interactive" prototype?
A plain vanilla HTML prototype will give you some interactivity out the box - simple stuff, like navigation. Adding a bit of javascript will let you go further, and do things like build forms that validate.

But for an experience closer to that of using a real site or app, you want to simulate the server backend - database,  persistent shopping carts and whathaveyou. You want your prototype pages to be able to emulate multiple states, like "What if the user is logged out on this page?" and so on. 

How do you make an HTML prototype interactive?
By using javascript and cookies (and maybe LocalStorage). jQuery certainly, then storing variables / states using something lightweight like polypage (if there isn't a jQuery equivalent yet). 

In the future, it might be possible to use fancy HTML5-related technologies like Local Storage to emulate all the server-side storage and interactivity a real site or app would have. 

Can't you just use a prototyping tool instead?
Plenty of pros and cons to using tools vs code for prototyping.  For me, both are valid depending on the project. For me, code prototyping has many benefits when thinking about responsive design in particular - that's what sparked this particular effort. 

What about the presentation layer (what its going to look like)
I could code my own HTML for presentation, but that seems insane with all the excellent HTML/CSS frameworks lying around just begging to be used. Most of them with prettier layouts and typography than I could do.

But which one?  There are approximately 1.3 billion HTML/CSS frameworks to choose from - and that's just the free & open source ones. 

A couple of lists to ponder. DesignYourWay has 27; here's a quora debate on the issue. 

Plus Twitter Bootstrap, Zurb's Foundation, and an intriguing option: Wikipedia's own mobile-first emerging framework, Athena . 

My evaluation criteria for picking a framework:

• must have a friendly licences (MIT, Apache, GPL, CC)
• must support flexible and  responsive approaches - no fixed 960 sizes
• must have easy-peasy grids set up
• should have reasonable but not perfect browser support. I don't really care if a prototype doesn't work in IE, but it should work well on all modern browsers. And I don't want to do any browser-support tweaking
• must have good clean proper HTML. So that if the prototype gets reused as the starting point for the production site, there isn't too much refactoring
• must be reasonably pretty out of the box

This last one is contentious. I can see some times it would be better to have a barely-styled prototype to avoid prejudicing the visual design phase. The Twitter and Foundation kits are too durned attractive for that. 

Enough chit-chat, lets get on with it. 
Since I'm coding only for pleasure, I'm going with Foundation for my first attempt, despite it being pretty. I'm going to plug in polypage, and try to make a basic mobile app prototype. 

NEXT EPISODE: we see if that worked out then.

Further reading:

Prototyping in code .NET article by Alex Morris I'll be referring to for tips 

24 Ways Article by Richard Rutter on managing page states with PolyPage

jStorage - a Local Storage kit for jQuery that might meet my info-saving needs

Axure 6.5 beta mini review

Quick verdict

in both features and feel this is a major step up. But it is beta and a little buggy, so best to hold off using it for work for a while.

Rather than regurgitate the list of new features, I've put together a prototype with some of them in action.  http://share.axure.com/9EOL8E

Greatest hits

The biggest improvement wasn't the new features but visceral - the new guides method for lining up objects feels properly  smooth and Mac-intuitive; it has pleasure-of-use up there with Omnigraffle. Big improvement over old, "gritty" feel. 

The new flow diagram styles are pretty nice, I may use this feature now (I've always preferred Omnigraffle for site maps in the past). 

There are a ton of enhancements to how variables and functions work, many of them relating to x/y coordinate stuff, so animations a mobile touch/swipe interactions will get easier. 

Beta oddities

• generating a prototype no longer opens the prototype in the browser
• The Generate on AxShare function doesn't have an option to save my password, so you have to re-enter it every time; 
• There was a bug with horizontal menus (edit: this has been fixed in a new beta release)

Old annoyances still present:

•  the way you apply colors from the color wheel is still clunky
•  the interactions palette is still  hard-to-read

Edit: 

I've had a quick go at some suggested improvements for the Interactions panel : http://share.axure.com/96P0XP/

Further resources

• Download and beta details http://www.axure.com/axure-rp-65-beta-now-available
• My quick and dirty prototype: http://share.axure.com/9EOL8E 
• More of the  beta in action at  the Axure forum http://forum.axure.com/axure-rp-pro-6-5-beta/

My UX resolutions 2012

Mobile, mobile, mobile. 

I'll fight the next person who says "this project doesn't have a mobile component". Everything is going mobile, or will at least have to acknowledge it. 

Lorem Ipsum no more

No more filler copy.  I work with content strategists - it's time to learn more of their craft, and to coach clients better to put their content first (or at least earlier) in the process. I've yet to have a Content First project, but will agitate for one. 

Find a way of living with Twitter

I need to find a decent content curation or filtering service that can help me feel like I am still connected but save me from drowning. 

Blog more, firstly for myself

Someone said "how do you know what you think until you've tried to express it?" (or thereabouts). I've been reticent with blogging in the past out of a fear of boring people or embarrassing myself. Simple cure - just keep reminding myself that I'm blogging for me, not for (non-existent) readers. Writing for audiences can follow later.

Curate better

I think I've found the right bookmarking service for me - gimmiebar. The visual playback of saved links encourages me to disinter links from time to time (something I rarely did with Delicious), and is fun. 

Sketch moar

My first thought for wireframing always used to be software (Omnigraffle or Axure). So my drawing skills are rudimentary. I can explain ideas to clients but I can't help prefacing it with an apology for the handwriting. Time to fix that. Here's some ideas to get me started. 

https://gimmebar.com/loves/jimbobc/collection/sketching

https://gimmebar.com/loves/jimbobc/collection/stationary

I will prototype in code (a bit)

All the cool kids are doing it, and it seems like the best way to get my teeth into a responsive design prototyping challenge. I'm looking at kits like  http://twitter.github.com/bootstrap/, Zurb's Foundation, and WYSIWIG jQuery kits. 

It's fun to teach

I had fun teaching Axure courses to colleagues last year - this year I'm going to take that public. YouTube videos? Free webinars? In person training? All sound good. 

More events

I didn't got to many events - dconstruct, UPA Boston were the biggies. I had my last Oxford Geek Night (sob!) and haven't found a local replacement for that. America nerds seem to stick to the big cities, so I'll try to head down to Boston more for Refresh, Ignite, and whathaveyou.  

I will design for good.

I had some non-profit and socially-worthwhile work last year, and I want to do more. 

Plan my learning

Last year I tried to eat from the entire UX novelty buffet (Content Strategy! Service Design! Behaviour modification! Motivation Design! Responsive! Mobile!). It's too much. My T-shape is in danger of becoming a flat line. I need to pick one or two (or three or four) topics and get deeper into them. Which ones though? 

That's enough to be getting on with. 

Customizable T-Shape generator in Axure

I was wondering what my UX T-shape was, so decided to try to draw it. I had Axure open at the time, so this happened:

Customizable Make your own T-Shape prototype

Features:

• Not just for UX people - relabel the skills to whatever you want. 
• Draggable bars
• Customisable name label field. 

This was going to be a prototype for a more attractive CSS & jQuery-based single-serving site, but I ran out of time and interest. 

Still, maybe it will come in useful to anyone who wants to quickly and not-too-attractively illustrate their t-shape. 

Taking it further: Molecular job-hunting 

What if employers posted a "V-shape" and you could visually compare it to your T-Shape? 

Of course this couldn't work, as the measurements of what counts as "deep skills" in one discipline is very subjective. 

Still, I like the ideas as it maps to my high-school understanding of biology, where jobs are like enzymes and people are like molecules - if a good fit is found, the employee gets metabolized into synergy particles or something. 

I made a crap drawing to illustrate this: 

Further reading:

Big IA is now UX (2004) 

What's your T-shape? (2010) by Leisa Reichelt 

is it time to rethink the T-shape?  

Am I an information architect? 

Survey results: which Mac Photo apps?

My photography is a mess. The photos I take just languish, unedited and unlabelled, on various hard drives, iClouds, and memory sticks. 

Time to get organised! First up: new software. Of course, I could just spend the time to master iPhoto properly and go from there, but I've never liked the feel of iPhoto; it comes off as clunky, slow, and imprecise. But I have no direct experience with the other mac photo apps I've heard of, like Aperture or Lightroom. 

I asked the internet: what do people use now for organising pics? For editing? And is Flickr still the preferred option for sharing? {Sidenote - and how many people would reply? Is Twitter a good place to ask survey questions?}

If I could just straighten out my workflow, perhaps I'd be motivated to keep taking snaps and improving. 

Survey reach: 

Of 273 Twitter followers, 14 to my request for survey. That's a 5% response rate - not great. But take away the ineligible tweeps* -  bot followers (-50), PC and linux users (-100), and non-photographers (-80), and that leaves 43 valid prospects - a response rate of 33%! Not bad!

[* = total guesstimates / lies]

Headline results:

Preferred app-that-isn't-iPhoto: Lightroom

Preferred editing app: Photoshop

Preferred sharing: Flickr and Instagram

Decision: Time to try out Lightroom. It's $299 from Adobe (gulp), but there is a free trial I'm going to check out. And I'll renew my Flickr membership, since it seems something better hasn't replaced it. 

Bonus round: I asked contributors to include a link to their own favourite photos. Two (excellent) responses below: 

Autumn - at Burning Man

At the Book Fair 

Belated MoWriteVember contribution: micro-usability post #1

Late to the "write more in November" party (http://www.nanowrimo.org/) and if the adage about "everyone having a book inside them" is true, I haven't found mine yet.  So! To co-opt the idea & make it work for me, I'm going to some microblogging this month. 

Today's idea: surf the web until I see a usability problem, then post about it. 

Today's exhibit: Hashtees email sign-up form validation error. 

What's the problem? I didn't enter an email address, and so it is telling me to "enter a value". That's a bit of a nerdy / impenterable way of saying "the email field is blank", and might confuse. 

Is that really a problem? Probably not, most people will figure it out. But it is clunky and that will register with people.

Solution? A catch-all error message of "please enter a valid email address" should take care of it. 

Is this a mailchimp problemor a hashtee one? Dunno.

My free iPad app is up! Introducing the Design With Intent toolkit.

101 cards detailing design gambits intended to influence or result in certain user behaviour. iTunes link (free).

I took @danlockton's Design with Intent toolkit and processed it into an iPad app for portability. It was a good excuse to learn a bit of jquerymobile and PhoneGap. 

Who is it for? Designers, UX people, town planners...anyone with an interest in the psychology of our built/designed environment. 

I might do an Andriod & iPhone version one day. 

Usability drive-by: Argos.co.uk

I got peeved with the argos.co.uk* site: I wanted to see if I could pick up an iPad at one of their stores, but found I had to check the stock on each model individually, like so:

• press "check stock", opens lightbox
• enter postcode
• confirm
• see they have no stock
• close box
• repeat

...meaning if you want to consider all 12 models of iPad, you have to click around 70 times. Ouch. 

Seems pretty backwards to me - why not let you put your postcode in first, and then tell you the stock on all items? Better yet, why not guess your town for you (a la Groupon), to save you even typing your postcode? 

I've whipped up a quick protoytype to try out this idea: http://share.axure.com/D942WE/ . Since it's on share.axure, you can try out their new commenting features and leave me feedback inside the prototype. 

Results: 

I'm pretty pleased with how this came out - in my make-believe version, the site correctly identifies my city and tells me upfront whether I can get an iPad locally, or how far I'd have to drive if not.  The other useful idea that came out of this was the "family availability matrix", letting you see which products in a family are available.  Argos seem to have this data available to them, so it shouldn't be too much of a stretch. 

[Edit: I've updated the wireframe as there were some odd font-sizing issues, making text overrun etc]

*For non-UK people: Argos is a chain of highstreet catalog shops, meaning you can order things and pick them up locally pretty much anywhere. Unless you want an iPad. 

I'm not affiliated with argos, disclaimer, please don't sue, etc. 

Did you mean to do that? Thanks gmail!

I <3 you, gmail!

Dusting off front-end skills: CSS Venn Diagram

It's like I've been dozing, and when I woke up, the world had changed almost beyond recognition.  Since I made the switch to UX, the web has gone doolally for HTML5,  embedding fonts & swanking it up with CSS3. Hey guys, wait for meeeeeee! 

In an effort to do something about it, I'm trying some HTML experiments / training exercises. 

First time out: some CSS 3.  I'm a fan of Dan Saffer's Disciplines of UX Diagram (PDF), so decided to redo it in pure HTML (with permission). 

Here's the HTML & CSS version. (Chrome, FF, Safari should be ok - not tested in IE)

It's pretty close to the original, plus has a handy draggable wee man so you can decide your UX niche. 

Things I learned:

• Dreamweaver is a horrible tool, and it's time to switch to Coda or similar;
• You can make line drawings using the :after pseudo element (hat tip - this speech bubble article);
• Repeating the border-radius command 3 times is annoying, sort it out browser-makers;
• jQuery is great but doesn't always play nicely with iOS - drag events, for instance, do not connect to iPad touch events unless you poke at it (which I didn't).  

I thought I could make this semantic somehow, perhaps by using an unordered list, but in the end couldn't figure out how to pad things nicely without divs.

What shall I try next? Maybe some of that newfangled CSS animation stuff the kids love. 

Thanks to Dan for the use of his diagramme.