"Graceful Hacks" - UX, IA and interaction design tips for hack days
•Download as PPT, PDF•
3 likes•651 views
Putting a working hack together in just 24 hours is hard graft, and the emphasis on getting it to work may mean that user experience is not your primary concern. Especially when there is also usually the distraction of beer, pizza and Rock Band. We can't all be born beautiful and graceful, so here are some tips about how to avoid your hack looking like a hack.
Recommended
Recommended
More Related Content
More from Martin Belam
More from Martin Belam (15)
Recently uploaded
Recently uploaded (20)
"Graceful Hacks" - UX, IA and interaction design tips for hack days
- 1. Graceful hacks Martin Belam Guardian Hack Day - July 2009
- 2. Not everybody can be born naturally graceful
- 3. The Yahoo! Design Pattern library is your friend
- 4. Peter Morville has a great collection of search designs
- 5. Drawing attention to changes... <div id="my_brilliant_hack"> <blink> .... </blink> </div>
- 6. There are a limited number of article 'slots'
- 7. This is the Google Adsense heat map
- 10. CSS frameworks might save you time
- 11. Labels are important to users
- 12. We have a style guide
- 13. Smashing Magazine has lots of design resources
- 14. The FamFamFam Silk icon set covers everything
- 15. Come and ask me... delicious.com/currybet/#ghack2
- 16. Graceful hacks [email_address] Twitter: @currybet
Editor's Notes
- This blog post is based on a lightning talk given by Martin Belam at The Guardian's July 2009 Hack Day - #ghack2.
- In the compressed timeframe of putting a hack together that works, user experience may not be the primary concern.
- Unless your hack is in fact all about re-inventing the interface paradigm of the web, then the Yahoo! Design Pattern Library is your friend. Basically, if you need to put some controls on a widget, this will give you an idea of the optimium way of doing so.
- Peter Morville is possibly the only person on the planet nerdier than me about search designs. If your hack involves some sort of search results display, his Search Patterns collection on Flickr is the place to go for inspiration
- Using the <BLINK> tag to draw attention to the new elements you've added to a page was apparently deprecated as a design concept in about 1995.
- If you are inserting a new widget or control into a Guardian article page, there is a relatively limited number of slots where new items can be placed without breaking the overall design and information architecture of the page.
- One company generates the GDP of a developing nation daily out of hacking badly formatted bits of text into web pages and getting people to notice them and click on them. In unrelated news, the Google Adsense heat map may help you think about where to position your new elements on a page for maximum visibility. Although I suspect most editorial people would frown upon a hack just being jemmied into the middle of the body copy of an article.
- Many developers I know have a set-up with two monitors working side-by-side, both set to a resolution of 12,568 x 9,654 pixels. This is not normal. Think about how your hack will appear for a regular user on a regular monitor at regular resolution. And the shape of that is changing. In Q3 of 2008, laptops and notebooks outsold desktop PCs for the first time. That illustrates a trend towards a more 'widescreen' view of the web. The Guardian's web analytics bear that out. Comparing figures from January 2009 to July 2009, we are seeing an increase in the width of open browser window size and a corresponding dip in open browser window height.
- OK, so this contradicts the previous recomendation, but don't forget that aside from the swishy iPhone and the intriguing Android, there are millions of handsets out there that can render fully formed HTML, providing it plays nice with a small screen size.
- If you aren't lucky enough to get a genius client-side developer as part of your hack team, you may find that your rusty front-end skills hold you back. You can take shortcuts using CSS frameworks. Blueprint or the Yahoo! CSS grid are good options, and the 1Kb CSS Grid is flexible and lightweight. These can really save you time during your hacking
- Labels are important to users. We found that the 'Travel' link did not perform well on the secondary navigation of the Environment front, even though stories about green transportation issues gained a lot of traffic individually. 'Travel' though, in a newspaper context, conveys something different from 'Transport'.
- The Guardian style guide can help you decide whether you need to refer to a web-site, website or &quot;Web site&quot;.
- If you need some graphical design elements, then Smashing Magazine has lots of icon and graphics sets available to download. Most of them are more serious than mice with icons. But there may well be a place for mice with icons on The Guardian site.
- Rather like the people who devote hours and hours and hours to Open Source projects for nothing more than the glory of being mentioned in the documentation, Mark James has made 700 icons in his 'Silk' set available on the web. It is probably lacking &quot;Power up Lego Robot's Death Ray&quot;, but otherwise should pretty much cover any icon needs you have for rendering controls on your hack. They are available as 16x16 PNG graphics.
- I won't be hacking today - I've got too much work on and the Guardian API is yet to be ported to ZX Spectrum BASIC which is about the level of coding I think I'm up to these days. However, I'm going to be filming some of the day, and I'd like to try recording some hack demos with Silverback on my Mac. I'll also be around to dispense advice or interfere...
- &quot;Graceful Hacks&quot; -