I had learned about some of these theories from my peers, and most are pretty intuitive, but having them laid out in one place will hopefully be a useful reference or helpful review.
No. Not really. As long as you include wireframing in your process, you’re “doing it right,” no matter the tools you choose or the process you use.
Well, that’s not very satisfying is it? What if you’re new to wireframing and need some help and inspiration for getting started? Luckily there are a lot of wireframe pros out there who are willing to share their process and some examples of their work. The important thing is to not obsess over the details of how the pros do it: which tool they use (Balsamiq, OmniGraffle, Fireworks, HTML) or what the deliverables are (flat wireframes, clickable wireframes/prototypes, paper prototypes, STOP-MOTION paper prototypes, protocasts).
Trying to figure out which is the best way or the “right way” to wireframe before you even start is like obsessing over finding the best ergonomic pen and the moleskine notebook with the perfect paper weight and texture before you start writing your novel. You just gotta start with what you have, and figure out what works best for you as you go.
Each of the presenters (and their partners/teams) developed the wireframes and designs individually and isolated from the other three, so that they wouldn’t be influenced by what the others were doing. So we get a pretty good idea of each person’s/team’s typical workflow. Plus,they decided that each would use a different tool to create their wireframes, so that we could see four different tools in action — and also see that they all get the job done pretty well. They presented four different workflows, with four different wireframing tools, none of which are the “Right Way to Wireframe”, but simply “ways to wireframe”.
Here are the four videos presented in “The Right Way to Wireframe,” for your viewing pleasure:
Russ Unger | Tool: Balsamiq
Todd Zaki Warfel | Tool: Fireworks
Will Evans | Tool: OmniGraffle
Fred Beecher | Tool: Axure
You’ll notice that even though they use different tools and have different deliverables, they all follow a similar process: research and requirements gathering, creating personas, creating a sitemap, sketching, wireframing/prototyping and finally, designing the visual look and feel. So if there is a “right way” to be found in the act of wireframing, it is in the process leading up to it: research first, sketching ideas next (lots and lots of sketching) and THEN wireframing. But the act of wireframing itself can be approached from many different angles with many different tools. The way you do it is up to you based on personal preference, the requirements of the project, and what will allow you to communicate ideas best to the individual client or project owner.
Can you guess what the most important piece of software is on a personal computer? It’s not Notepad, it’s not any office productivity suite, and it’s not Solitaire. Certainly the most important piece of software, at least since the 90’s, is the web browser. The web browser has brought the whole world together digitally through web email, shopping web sites, and Facebook. (And yes, you can also use a web browser as a notepad, office suite, and you can play Solitaire with one, too.)
Content on the web has evolved from simple text and tables to elaborate layouts of page intermixed with images, audio, and video. The underlying HTML used to display this rich content has evolved as well. From the early workings of HTML 1 all the way to HTML 4, HTML has seen a steady growth. The current version, HTML 4, is great. The language allows for embedded objects (like Flash), and other neat stuff.
It’s been over a week now since the final day of SXSW Interactive, and of course we are just now getting over the post-South By “hangover” period (readjusting to everyday life and work, and trying to remember what day it is). We’ll be unleashing several SXSW recap posts over the next couple weeks, reviewing some of our favorite panels and some of the ideas that really “stuck”. There were only four people from eROI who went to the conference this year (fewer than in previous years) but I think we’ve got plenty of thoughts to share amongst the four of us.
But before we share our deep thoughts, I just wanted to give a quick overview of my experience this year and share some notes I compiled on the plane ride back to PDX.
Unlike last year, I came to Austin armed with a smart phone so I got to tweet to my heart’s content (from my barf account) and check in often with Gowalla. Lots of my friends were using Gowalla this year and it really did come in handy trying to figure out which panels they were sitting in or at which bar they were responsibly partaking. Plus there was the excitement of possibly finding a virtual VIP wristband to get into the Gowalla Tiki Room party, where Diplo was slated to perform, or one of the many real life prizes that Gowalla was giving away. I didn’t pick up any prizes or the VIP pass, but a friend did win one of the Lomography cameras (and we did make it into the outdoor Gowalla party, albeit after Diplo had left the stage and during a rainstorm).
SXSW Interactive is almost here, so those months of giddy nerd anticipation are almost over! Hooray! But wait, have you studied the schedule yet? Picked your top panels? Perused the party lists? Researched the must-try restaurants and food carts? No? Well don’t panic yet, you still have a little time. And to help sort through all the madness I’ve compiled a list of tools and sites that are helping me do some pre-planning this year. As a mere SXSW Sophomore I’m far from an expert on the conference or on Austin, but hopefully this post will help you get organized a little bit.
Finding Promising Panels
Sometimes a panel or session that looks amazing based on its short description in the official SXSW handbook turns out to be, ehhhh, not so great. And of course the one you decided NOT to go to was the must-see panel of the day. Although you’re not going to pick winners every time, you can help yourself by doing a little research beforehand.
Over the last couple years I have been salivating over being able to attend the coveted SXSW Interactive Design Conference. This year I have paved myself a path to get down there and soak in the massive amount of inspiration that gets unleashed in Austin this time of year. I couldn’t be more stoked to take it all in… but how on earth am I planning on taking what I hear and retaining EVERYTHING I need to come away a better designer, thinker and doer?
Do I fill up countless notebooks with quotes and drawings, set up my handy tape recorder so next time I feel like re-living the whole weekend I can just flip a switch? Maybe I can just listen carefully and soak it all in, hoping the inspiration seeps in through my pores.
While I most definitely will have a pad and pencil in front of me, I will also have my iPhone, and where there is an iPhone in the hands of an interactive designer… there is the amazing micro blogging tool called @twitter. Have you heard of it? It is kind of a big deal these days. So much of a big deal that its use has become at times… well, overused. I am here to tell you a few easy steps to keeping your followers happy with your content stream. Remember kids, it is all about well placed, relevant content.
One of the reasons I love web design is because there is so much opportunity to pull knowledge and inspiration from other disciplines. The SXSW panel “Playing on! Interface Lessons from Games” let me do that, and it dealt with video games, which are just fun. The general idea of the panel was:
“We know we will have succeeded when non-game interactions provide the same level of emotion, feedback, progress indication, innovative controls and social involvement that games supply.”
The points that really resonated with me the most were their discussion of “progress indication” and “social involvement” and how those apply to the work we do in web design.
While at SXSW, I was bombarded with concepts, names, and countless tidbits of knowledge throughout the panels, presentations and keynotes I attended. Christina Wodtke gave an informative presentation on Information Architecture. UX Team of One presented by Leah Buley of Adaptive Path and Design for the Wisdom of Crowds with Derek Powazek were terrific presentations covered on Fresh here and here respectively. The topics that I enjoyed the most involved user experience design concepts, human computer interaction and how cognitive sciences influence it all.
Some of the most popular web applications exist to satisfy basic human needs. Organizing and sharing information. Symmetrical and asymmetrical relationships within groups. These are well researched patterns of human behavior. Technology is a chaotic, constantly evolving mess but behind all the innovation is our own innate desires that bring it all about. Where technology is fleeting, trendy, and a futile struggle with obsolescence, designing for human interaction with technology can be timeless. Interaction designers and developers are conduits for translating human behavior into effective uses of communications technology. In order to craft experiences that influence behavior we can employ aspects of psychology, anthropology, computer science, graphic design, industrial design and cognitive science.
Web Typography: Quit Bitchin’ and Get Your Glyph On was a popular panel that discussed limitations of web typography, myths about web typography and how to dispel them, and talked about overcoming constraints on the web to create typographically beautiful websites.
What is all the fuss about fonts on the web?
The first question the panelists were asked was, “Why are designers still bitching about typography?” After the giggles subsided, the top reasons they gave were:
frustration stemming from having such a limited palette of available fonts
the complexity and consistency involved in getting your type to render as intended
Basically, type on the web can be a pain in the ass. There are a decent amount of web fonts, but not all are attractive (Papyrus, anyone?), sometimes you have to use the corporate font specified in a client’s brand guidelines, and regardless what you do, everything can still shift around. A user could increase their font size or have a different default font specified for their system and throw off your whole groove.
Are there solutions?
There are several. Many people make their fancy titles into images, which does work, but then you’re faced with how to keep that text on the page for SEO; others use an image-replacement method like SIFR, but that involves Flash and can get pretty tricky in terms of line-height and making sure it doesn’t do something funky with punctuation or line wrapping. The “new” thing on the scene is to try out @font-face. (more…)
This panel at SXSW was really interesting for a couple reasons. Jared Spool from UIE is such an engaging presenter! He had us all laughing; I was thoroughly engrossed the whole time. Also, the panel was really awesome because it challenged a few ideas that I generally don’t think twice about.
One of the primary points from the panel was that there is no evidence that user centered design has ever worked. I was really surprised to hear this! One of the anecdotes that he used was based on Apple and Microsoft. Spool claimed that apple hardly does any usability tests, while Microsoft does them constantly. (and we all know whose designs are better!) He didn’t have any numbers behind this, so I’m not sure of the validity. But really interesting none-the-less!
