be rad…be foolish

I’ve been in talks with an ecommerce web design firm in Austin.  Part of the application was was to create a comp for a hypothetical client.

I had two options, a skateboarding shoe company and a women’s clothing company.  I was leaning toward the skateboarding shoe company and decided to commit to it.  I figured if I end up working for them, I wouldn’t get to choose the clients I work for.

Below is what I came up with after about a day’s worth of work.  As I designed it, I kept the word ‘mobile’ in mind.  I feel like this design could look good on a computer screen or a mobile phone screen.  I pulled the images from Google as placeholder images.  Otherwise, everything is my work.

This post is to show the work that went into my capstone.  A lot of screenshots.

Sources:

The above screenshots are of highway statistics.

I compiled data from the Federal Highway Statistics reports

http://www.fhwa.dot.gov/policyinformation/statistics.cfm

The above screenshots of data I collected on warehouse style retail stores.

I was able to find out square footage of the biggest and most common warehouse style retail stores in North Carolina.  Then taking that square footage and multiplying it by the number of stores in North Carolina, I was able to find the total square footage for each retail chain.

Parking lot sizes were an important component of determining the total footprint, statewide, for the retail chains.  With a distance measuring wheel, I measured parking lots of area warehouse style retail stores.  I would walk the length and width of parking lots in front of the retail stores.  I measured three parking lots for each type of store and then averaged those three measurements to get a general idea of parking lot sizes.

I conducted a usability test of my infographics.  I created static and interactive infographics and put them into basic websites.  I then had a class of 32 undergrads go to the websites and fill out a paper questionnaire in response to each infographic.

Here are the websites:

http://student.elon.edu/bmu/versionone/

http://student.elon.edu/bmu/versiontwo/

Purists would have you believe a perfectly designed infographic requires no interactivity.  All the information is adequately, if not perfectly, presented and in a logical, hierarchical, intuitive and easy to understand way.  As of the beginning of February 2011, I shared this view.  Now, I think this view is about as old-hat as, I don’t know, rubbing two sticks together to make fire.

With any sort of information design, logical, hierarchical, easy to understand information presentation is a must.  Print designers have been doing this for years: tables, ledgers, bar charts, pie charts and, the beloved, venn diagram–just to hit the highlights.  Any sort of non-prose information can fall into this category of ‘designed’ information.  We think of information design and infographics as a recent phenomena, but it goes way back; as long as we’ve been assembling information without the traditional subject, verb, object model.  Merchants needing to keep inventory, cartographers making a map, stone cutters telling a story on a monument.  They all had to rely on something more intuitive.

Information design is all about guiding the viewer’s eye around that piece of media.  Different fonts, different sized fonts, the placement of text and non-text elements, something as simple as a thin line, these are all tools an information designer uses to logically tell the story of the data they’re working with.  We all understand this–top to bottom, left to right, bigger fonts to smaller fonts, lines separate or guide, color to emphasize, &c.

This all still applies to interactive infographics.  So if an interactive infographic doesn’t adhere to the these conventions, forget it, it’s useless.  Interactive infographics, sitting on a screen, without any input from the user, should be up to par with a static infographic.  They should tell a story, convey information, be intuitive, all without any input from the user.  The value of interactivity are the additional layers of information that a static infographic could never achieve.  A user can click or hover over an element that’s already presenting information to get even more information.  Visual elements can be animated presenting a visually rich experience.  And like all interactive media, the user is put in the driver’s seat.

Interactive infographics require an even greater sense of hierarchy, intuition and clarity than static.  Elements will move and shift and animate.  The user must always know where he/she is in the infographic.  The minute they get even a little confused, they move on.

It’s a trade off, users can potentially be exponentially more engaged with an interactive infographic than a traditional, static infographic.  But interactive infographics must be flawless in their execution of information design.

And on that note, a parting thought.  Given that interactive infographics must be even more organized and intuitive than static, how do we balance simplicity of design and presentation with complexity and depth of data?

Just finished an infographic.  Since my capstone website won’t be live for another month or so and I’m not sure when I’ll be able to update my portfolio, my beloved blog seemed like the right place.

I’m pretty happy with the simplicity.  I just spent an hour debating whether to use League Gothic or Bebas for my font.  Turns out League Gothic is a better display type and Bebas is slightly better for text–slightly larger counters, so easier to read.  I compromised.  I’m going to title all my infographs with League Gothic and use Bebas for everything else.

Just a quick post, have to get back to work.  I’m testing a class of about 30 undergrads to see what their reactions are to static infographics versus interactive infographics.  I’m about done with all the static versions, now I have to make them interactive.  I’ll be neck deep in Flash momentarily.

Thank god for March Madness On Demand!

Halfway through Spring Break, I’m a bit miffed at myself.  I intended to spend the break waking up early, working all day long and into the night, getting myself on a sane sleeping schedule and generally being very productive.

I can’t say I’ve really stuck to the plan.

So far I’ve caught up on missed episodes of the BBC’s Top Gear, gone to the beach with a buddy and managed a couple trips to the gym.  Not quite as productive as I imagined it.

Today I decided to not be worried about it.  In fact, I got some work done today.  My sleeping schedule is now bang on (pardon the English slang–it’s a result of all the Top Gear).  But most importantly, I’m taking a quick second to chill out before the home stretch of grad school and what will likely be spent as the most stressful, hardest working, most late night filled month and a half of my life.

When I realized this about an hour ago, I got a little scared.

But I’m glad I realized this.  I can be hard on myself.  I sometimes take life a little too seriously.  I can get caught up in my work.  So for me to know and think about how intense the next month and a half will be should help me out immensely.  Amidst job searching, the push to complete my capstone, keeping up with classwork and all the little things that are going to pop up, if I don’t let myself get too caught up in it all, I think I’ll do really well.

So I’ve set a daily mission for myself.  Find and reflect on three things.  1.  Something I can be proud of.  2.  Something I can be thankful for.  3.  Something to laugh at.

If I can find those three things every day, I should be able to keep my head on straight and keep my sanity.

Home stretch of grad school, here we come!

It’s been over 24 hours since Mike Kruzeniski’s presentation ‘How Print Design is the Future of Interaction’ and I can’t stop thinking about a number of his points.  And then this morning I went to Designing iPad Interfaces – New Navigation Schemas led by Lynn Teo.  Seems like Lynn and Mike are on similar wavelengths.

Mike started out talking about the history of digital interfaces using components designed to represent familiar items found in our desks.  These were new interfaces that needed to be relatable and accessible to the user, so designers made the obvious choice.  Lynn spoke about more recent technology but made the same comparison.  The iPad, new technology and a new interface (albeit touch interface and naturally more intuitive), is often presented to the user with designs resembling physical objects around us.

Is this convention of ‘physicality of design’ to show off the capabilities of these new technologies?  Is it to amaze the user?  Is it to make it easier to use and interact with for the user?  Do these physical metaphors make new technology disarming? I think all of the above.

I think Mike’s and Lynn’s points converge at an interesting place in current interactive media trends, the rise of touch interface.  Lynn showed the audience a number of iPad apps in her presentation.  Both Mike and Lynn showed the Flipboard app.  And in my opinion as a rising designer, the best apps shown were the simplest and most straightforward.  They were the best designed because they incorporated the principles Mike advocates.  They moved away from the ‘styling’ we know as the reigning web design trend.  They skipped the glossy/glassy/chromed buttons and sought simply good, straightforward design.  As more and more elements on our screens become interactive, the styling designers are currently using will only confuse the user and clutter the interface.

More importantly, the best apps Lynn showed put the information front and center.  In the new design paradigm that touch interface will bring, the prevalent mode of design should be what Mike said: information as UI.  Lynn took a slightly different stance–navigation and ease of navigation–as necessities for designers creating for touch interfaces; users must be able to explore and find new information from a seemingly infinite resource.  Touch interfaces are more intuitive (Lynn showed a video clip of a very young child immediately learning the interface) and the pace of navigation is quicker than it ever has been on a digital device.  Physicality in interactive design will only act as an impediment; our physical metaphors are already making less and less sense.  Why would we think those metaphors are going to get any better?

Mike’s points changed how I think as a designer.  What he said spoke to inclinations I have always had but haven’t been able to put my finger on.  Lynn’s presentation grounded these newly formed ideas and showed the how, where and why in implementing these ideas.

As a designer, especially an interactive designer, information should be everything.  Nothing should get in the way of a clear expression of information.

I’m over in the Hilton for this one.  The room is absolutely packed.  I’m sitting on the floor as is about 25% of the crowd here.

The panel will be led by Carola Thompson of Mindjet and Jim Nieters of HP.  Carola seems like a nice person, she’s circulating in the crowd talking to folks.

Carola and Jim are telling their backgrounds…

hmmmm…seems this isn’t what I thought it’d be.  I’m not going to leave but I hope this gets interesting.

For an idea to succeed, you need executive support, the right and smartest people you work with, the users. This is good advice for someone who hasn’t been a designer in a professional capacity yet.  But it’s kind of obvious.

I might be the person in the room farthest from the door and to leave I’d have to walk in front of the panelists…#fail.

Thank god for ESPN Gamecast…even though Carolina is down 14 points to Duke at halftime.

I want to try something new.  Instead of Live Blogging, I want to record my immediate thoughts in response to Lynn Teo’s presentation on Designing iPad Interfaces.  So as she makes her points, I’ll write down my thoughts; I’ll do my best to include her points.  This will be a UX panel and while I see the value in UX design, as a designer I’d prefer to keep my distance.  So let’s see if anything changes for me during the panel.

The first toys we had as children were interfaces.  Makes me wonder how our toys affected us as we developed into adults.  Did I have some toy that has made me predisposed to design rather than developing?

We’ve gone from calculators to mouses to tablets to touch-interfaces.  The idea of touch has slowly evolved and become more prominent in design.  We want our technology to be more and more integrated with our natural behaviors and tendencies.

The most compelling devices are touch based devices. It’s more natural for us as humans.  It allows us to be more lazy.  It works for the less savvy.

Teo’s showing a video of a very young girl using an iPad for the first time.  The girl immediately starts swiping, using the keyboard, drawing with her finger. It’s amazing how intuitive the iPad interface has become.  The girl is dragging and dropping.  But as immediately savvy as this girl is, her dad still had to instruct her quite a bit.  Her dad had to instruct her to ‘touch the cat’s face’ for one of the apps.  That tells me, as designers, we will always struggle to make navigation obvious yet attractive and interesting within the interface shown on the screen.

Sometimes form influences our behavior.  Teo’s showing a chair that is so ergonomic that it might not have been recognized as a chair without the magazine and drink sitting next to it. Form has always followed function, but now we’re seeing the form be the function.  And that’s pretty cool.  It forces us to think more about the objects around us.

Form informs function. As a designer, this makes me excited.  I’ve always thought form should follow function, but this point makes me think that they should work in tandem.  Hopefully we can create better designed, more useful, more functional products.

Teo’s showing the Target app for the store.  It’s a very physical design, looks like a desktop. This brings me to a point that’s been present in my mind since a panel yesterday.  Yes, the iPad is a tactile device, but why are we trying to recreate the world around us?  Why not try to create something new, something beautiful, something that gets straight to the information rather than the visual aesthetic.  The information is more important, not the looks.  I’m seeing the importance of information being the center of the design and not the aesthetics.

Teo’s showing an app with a lower ‘drawer’ table of contents you can slide through. This is similar to a design Wired Magazine featured in an online video recently you can slide right and left to get straight to where you want to go.  I think this is a good example where the design is putting the information front and center and providing great functionality rather than just making something look cool.

Teo’s showing apps that use a kind of ‘layer.’ This is giving me some thoughts about my capstone.  It could be interesting design, to have layers of my infographics.  The user could click through layers behind, to the side, above, below, etc.  It would give the user a sense of everything being readily accessible.

Physical and recognizable navigation schemas are relatable to the user. I totally agree, but I think as designers we should attempt new conventions and interfaces.  To hold on to recognizable objects to represent elements in navigation schemas is a little dated, it’s old school.  We should at least try something new, even if in smaller projects.

Making users feel a sense of infinity an helping them discover should be the job of the designer. I completely agree.  It’s nice to hear this because I thought of UX design as designing for what the user wants.  And if we were to do that and only that, design would never move forward.  So as long as part of UX design includes the idea of moving forward and always evolving, then maybe I don’t see it as such a negative convention in the world of web design.

Teo’s showing ABC New’s app that has the ‘globe’ feature with articles and thumbnails wrapped on the globe. Interesting design.  I think it does was Teo explained the developers wanted, which is for the user to explore.  It’s kind of a poor design, but really good idea.  Could be improved on.

Teo is talking about ’tiles flipping’ as a way to encourage exploring. I disagree, I think it might in the short term but it’s a very stupid strategy.  To think a user is going to explore because something flips or is animated way underestimates the user.  Animation such as flipping tiles or a globe that you can spin to get to more content is cool but it’s totally auxiliary.  It should never be considered a primary strategy to try to boost click through rates.

Teo is now showing the Wired interface I mentioned above. I love this interface.  I designed something very much inspired by this interface but much simplified.  I hope this is the future of design for longer integrated pieces of writing.

Teo is showing the Marvel comic reader app.  She’s talking about how users might not know how to use the interface because it’s new and different. My question is: is it too soon?  Are we not yet to the point where the user can expect interactivity.  Eventually we’ll get to a point where every element on the screen is interactive and the user can expect interactivity on any element.  This is what I’m excited about.  I think when we do get there as a digital society, it’ll open up a lot of possibilities for us designers.

Teo reiterated a point she made earlier and I may have missed her point. She talks about the ability to swipe and interact as a way to encourage discovering.  And I agree, right now we need to ‘herd’ users to a new way of thinking.  Interactivity needs to be represented by animation now.  But I don’t think it will always need to be this way.  Once we do get to a point where everything is interactive, we’ll actually have to get rid of some animation as to prevent over-animation.

Session is over.  All in all pretty interesting.  Glad I came and this new form of blogging I thought was great for me to form and record some of my ideas.

It’s early Sunday morning at SXSWi.  There is hardly anyone in Ballroom A.  The room’s maybe 10% full.

The panel is the Music of Interaction Design, led by Cennydd Bowles and James Box, both of of Clearleft Ltd.  Reading the description, I thought music was a metaphor.  But as I sat down they’ve been testing out music clips, there’s music notes and bars on the PowerPoint presentations.  Being a music lover and former musician this could be interesting.

10:33 ELIAC – electronic integrator and computer.  They’ve got a picture of it up on the screen.  Huge computer.  Now punch card computers.  The user is being forced to speak the language of the machine.

10:36 In the 1980s Apple wanted to turn the industry and exploit the home market.

10:37  As interaction designers we think about how objects will be used over time.

10:38 Music and interaction design are asynchronous.  They both blend art and science.  Combine building blocks.  Both experiential.  Both ineffable.

10:39 Musical score up on the screen now.  It’s visual.  It can be abstract like music notes or more iconic like the guitar tab.  Digital desingers use similar notations for the visuals we design – sketches, wireframes for direct mapping.  But this is all about the surface layer and not what happens between the pages.

10:41 All the methods of planning and instructing how to build don’t get at the experience a design gives us.

10:42 Three layers effect our response to the world around us – affect, behaviour, cognition.

10:42 Today we’ll focus on the affective response.  Attractiveness bias…attractive defendants get out of convictions more so than ugly ones.

10:44  We’re shown a video clip.  Musical consonance is a positive affective state, it effects us all and we all respond the same…across the world.

10:46  They have a couple notes on screen.  They’re playing the chord that goes with them.  They’re talking about assonance and dissonance.  Which is how we talk about user experience sometimes.  They just showed the ‘Brown Note’ South Park clip…hahahahahahaha.

10:47 the brain has a built in ability to process musical assonance and dissonance.

10:48  Assonance and dissonance are really ratios, it’s all math.   A perfect 5th chord, totally assonant, beautiful, harmonious to us, has a three to two ratio.

10:49  They’re talking about the golden ratio now.  It’s been used in design for centuries.  they’re showing an example of the grid system.

10:50 Three and four beat measures feel good for us.  Five beat measures feel awkward to us.

10:51  Interaction design involves more than the visual rhythms on the page.  What comes between pages is important.

10:53  They’re talking about Hunch.

10:54 Our brains can find a certain pitch.  It allows us to filter out what we don’t want or need.

10:56 Perceptual Layering – for example the use of colors on the London Underground Map.  Our brains look for patterns – he has a picture of a snake up on the screen.  Evolutionarily, we had to recognize patterns to perserve our lives and health.

10:57 Music is the pleasurable overflow of the brain.

10:58 They just went through a bunch of chords.  Visually and through sound.

11:00 – Gestalt.  Figure – ground.  They’re showing a Mac Computer app for writing.  It takes up the whole screen, is a picutre of a snowy hill with two trees and there is soothing music playing.  It lets you focus on the task of writing.

11:03 Emergence – designers confuse the brain of the user so that it can emerge for them.  For example, an obscure picture that takes a while to understand.

11:04 Invariance – similar objects but presented differently.  He’s playing the 1812 Overture as an example.

11:07 Simplicity is prevalent in design, minimalism.  But like chords that sound better not thin but richer, can we design this way?

11:10Dissonance inspires frustration consonance inspires boredom.  How do we find the balance, the flow?

11:11  Subvert Expectation – Stravinsky was a master.  Our brains expect something, but we’re being tricked. Stravinsky wanted our minds to hear something new, it’s innovative.

11:19  People think that UX design is all about answering the desires of the user.  But as designers we have a responsibility to involve our craft in what we do.  UX designers should take the lessons of music to interaction design.  Sometimes users don’t know what they want, which is where the designers should infuse ideas of assonance, dissonance and consonance.  Designers should find the balance between frustration and boredom.

I’m sitting here with Mike and Cait.  This panel is in Ballroom A, one of the bigger rooms they’re using for panels.  The panel will be led by Microsoft’s Mike Kruzeniski.  With 15 minutes to go the room’s about 40% full.

10:23  They just started playing Sweet Disposition in the playlist before the panel starts…thanks.  In fact, the playlist in Ballroom A is pretty sweet this morning.  Had to get out Shazaam to figure out one of the songs.

10:29 Kruzeniski has a PowerPoint presentation ready to go.  I think the typography will be pretty great.

10:30 Kruzeniski is starting.  Room’s about 80% full.

10:34 Kruzeniski is a designer at Microsoft.  He works on the Windows phone.

10:35 He’ll cover how the visual languages of interfaces have been shaped, why interfaces need a new approach to visual design, why we can learn from print design.

10:36 Kruzeniski is interested in principles print designers use and how those principles can be applied to interactive design.

10:36 A history of: Kruzeniski talks about Vanevar Bush’s Memex machine.  He’s got a graphic of it up on the screen.  All our materials and documents are stored in the machine and can be accessed and worked with.

10:38 Kruzeniski is talking about the start of Xerox.  How Xerox used for the interface design metaphors of objects we recognize in a desk…scissors, knife, pen, etc.  Xerox’s Star Interface.

10:40 Apple started to really push the idea of using familiar, desktop objects in the design.  He’s got a picture of Apple’s calculator in an early operating system.  He’s talking about ‘recreating’ physicality.  It’s almost a virtual world with halls and buildings.  But it was abandoned.

10:41 As screen resolution improved, designers continued to recreate physicality.

10:42 Kruzeniski is talking about Apple and Microsoft’s operating system circa 2000 until the present.  Designers are creating icons for things that aren’t tangable.  Designers have to make them physical in some way…relatable.

10:43 Our physical metaphors aren’t making so much sense any more as designers push limits of design.  He’s got an image of a 3-D desktop-like interface.  The recreating of physical-ness is starting to get a little odd.

10:45 Hyperrealism is the dominant aesthetic.  Ergonomics, usability, cognition are primary concerns.

10:46 The web presents a different type of UI.  Interfaces were stripped down.  It became all about the information sent and received.

10:48 some web interfaces are out of control and have more information than they should.  He’s got a screenshot of Amazon up…haha.

10:48  Information as UI…i love this idea.

10:50 We’ve gotten to such glossy textures in elements like icon design.  It’s kitschy.  (I’m thinking of my iPhone interface design from last semester…haha).

10:51 Information and artifact UI are converging.  Resolution is increasing.  We can accurately render typography.  We can approach and design elements more elegantly.

10:52 Now that we’re giving up books, why don’t we start thinking about them differently?  Especially as designers.  These items need a new form of expression.  Information is changing this.  We want to express and render information more so than the kitsch of the design.

10:54  He just mentioned Massimo Vignelli.  I like this guy.

10:54 Print design has a much longer history than does interactive design.  There is a huge wealth of design we can pull from for inspiration when designing for information based user interface.

10:55 Kruzeniski believes the Swiss style of graphic design was when print design ‘snapped.’  It was the turning point when we started to think about ‘what have we learned from these hundreds of years of print design?’  Even after we moved on from the Swiss style, elements like the grid system remained.

10:56 Why has interaction design moved away principles of recent print design, which is built on hundreds of years of experience?  Why are not all of our screens as ordered as they should be?

10:59 Confident use of negative space.  Kruzeniski believes it’s scary.  (And I would agree, and I also agree and think we don’t use negative space enough).

11:00 Objectivity through imagery. The use of images in design.  And using it well to tell part of the story.

11:01 Uncompromising focus on typography.  Really use typography to create flow and rhythm.  It creates an energy and story just through type.

11:02 Proportion and Pacing.  Our interfaces a lot of times seem stale and boring.  He has images of branding materials from American Airlines.

11:03 Universal Iconography.

11:06 Kruzeniski has been showing some interfaces that have been improved by going back to ‘inspired by’ print design.  He showed American Airlines’ website.  The windows phone that went from being covered in icons to stripped down to some text.  Really beautiful (and surprising for me to see that from Mircosoft).

11:10 Kruzeniski is showing a clip from the film Helvetica.  The clip shows how kitschy print design was in the 50s then compares it to the rise of the use of Helvetica.  I’m seeing some parallels with our current interaction design to how things were in the 1950s.

11:12 Flat is the new black.  2-D is the new avant garde. – Steven Poole

11:13 We should treat the surface like a print surface.

11:14 What we need: the want to use and consume print design, the designers need to take up the practice of print design, the process-we need to think about visual design from the start.  Visual design is the end of the waterfall, but it should be thought about from the beginning.

What do we get: more beautiful products, beautiful brands

11:18 Kruzeniski just finished up.

I’m really inspired right now.  I feel like I’m a different designer now.  Totally new approach to designing for me.  Really transformative ideas.  I’m rethinking a lot of my design ideas and what I’ll likely do going forward.  A lot of what Kruzeniski talked about spoke to some tendencies and desires in myself as a designer that I haven’t been able to put a finger on or describe.  He made a lot of good arguments for these new conventions; type for interaction rather than a button, getting away from the physicality of what we design.  And maybe the most illuminating parallel was 1950s print design versus print design under the Swiss/International style and what the Internet looks like today.