Design Lessons from My Father

Over the last few years I have found myself, more the once, saying things that make me stop and think -  'Whoa that is something my father would say'. I began to realize that much of my design and general 'creation' methods and philosophy comes from my father. My father would not call himself a designer, although when asked what he did at work, he usually responded 'making stuff'. I always found this statement a bit odd and couldn't really relate from my childhood imagination of what fathers actually did at work (this was equal to TV dads). It wasnt until much later that I realized - together with my own desire to create something - what he meant and appreciate certain experiences.

My father exposed me and my brothers to technology at a very early age, as well as gave us ample opportunity to build things on our own (read:blow-up) - model rockets, hot air balloons (too small for people), RC airplanes, computers - you name it. When I was a bit older we were exposed to carpentry, homebuilding techniques (from reading monthly issues of Fine Homebuilding and Fine Woodworking magazines) and architecture. My father also exposed me to all things Japanese. It started with a few bonsai trees and progressed to a full scale Japanese garden in our backyard. This combination of technology and aesthetics has been a powerful combination for my future.

All of these experiences resulted in some useful lessons:

1. Read

My father read (and still does) constantly. I have many fond memories of my Dad reading in the evenings, at the beach, in airports - everywhere. My father also read everything. No matter what book or magazine he found laying in front of him he would read. It was almost that we couldnt help himself (I have the same habit). This resulted in him having a rather wide area of knowledge, that really is an asset when designing solutions. Some of my truly best design solutions are ones that I developed while reading magazines about subjects I wouldn't normally be interested in.  True innovation occurs in the combination of previously unrelated ideas and reading is a good way of exposing yourself to these ideas.

2. Measure twice cut once - Prototypes

My father is now, after retirement, a full time carpenter. I have watched him through the years build furniture that has become more and more complex and elegant. Each project demands planning and due to the work and cost involved, a good way of minimizing risks and avoiding mistakes. Enter prototypes. If my father was making a large piece that involved new techniques he would often make a prototype with less expensive wood. This allowed my father to learned from the process, modify techniques or change the design  without breaking the bank.

In the digital world, I have found prototypes an excellent way of testing to see if a solution is effective in a low(er) cost format.

3. Try it yourself

If my father wanted to learn how do something, he read about, then gave it a try. He wasn't very big on calling in an 'expert' to do certain projects if he was confident he could do it himself. He succeeded many times, and seeing this has given me the ability to try things myself I may not have considered otherwise.

One of the things about designing things digitally is that many of the technologies you can try yourself. There is usually a blog post or tutorial that can guide you through the most difficult technologies. By doing this, you learn what is involved in realizing an idea digitally and also the value of experts in these areas.

4. Tools

I remember going into by fathers shop looking at all the different tools in amazement. My brothers and I would begin to make basic wood 'objects' and realize we didn't have the skills or knowledge to do what we wanted. My father would take out a strange looking tool that could perform the task easily.

'The right tools makes things easier' he would say.

When designing things, using the right tool, can make all the difference.

Editors Note: The opposite can also occur. I have developed some good design solutions using the completely wrong tool. It took longer, looked rather bad, but was a good solution.

Thanks to my brother Brian for inspiration and ideas for this post.

UI Design Patterns

The last few months have been a very intense time as I have recently changed jobs. In my new role, Interaction Design is a critical part of the job description (yeah) but this has put my personal UI toolbox to the test .  Over a series of weeks, I tried to expose myself to as many UI design solutions as possible. During this search, I have uncovered a large collection of some really great sites that I would like to share. In order not just to flood my senses with design solutions and improve recollection for the future, I started a notebook of highlighted UI solutions. Actually, it started a few doodles on scraps of paper, but it soon graduated to it's own notebook.

The method of documentation is simple, for each new resource I discover, I choose at least 3 solutions that I find interesting or relevant. I study each solution, then after a few minutes, sketch the UI from memory. For me this, this works well for internalizing the UI solution in my brain for future recall. Occasionally, I have redrawn the UI slightly different, or how I remember it, transforming it into something different.

My list of top UI design resources:

UI Design Patterns for Websites and Applications

1. UI-patterns.com

UI-patterns.com is a large collection of design patterns for UI designers to gain inspiration from. The site allows users to keep sets of their own (publicly accessible to site visitors) so that you can see other UI design pattern collections.

2. Interaction Design Pattern Library

Welie.com has an interaction design pattern library maintained by Martijn van Welie, a Ph. D. graduate in Human Computer Interaction who now works as an Interaction Design Senior Consultant for Philips Design. The library features a ton of design patterns involving various site tasks such as navigating around a site, searching a site, and basic interactions such as slideshows. Each pattern follows a specific format: (1) the problem, (2) the solution, (3) when to use the pattern, (4) why you should use the design pattern, and (5) examples of the pattern in use.

3. Pattern Tap

Created and maintained by Matthew Smith and Chris Pollock, Pattern Tap is a gallery of popular web-based User Interface components and design patterns such as slideshows and breadcrumbs. Pattern Tap allows users to create their own sets, and they now have over 7,000 user sets. There’s plenty of inspiration to be gained at Pattern Tap.

4.  design|snips

This design gallery focuses on common web page components such as navigation as well as popular design trends such as Grid layouts. design|snips has over 30 categories so that you can easily find the design pattern/trend that you’re interested in. Users are allowed to rate each design featured in the gallery so that you can see what the overall consensus is with regards to the effectiveness and appeal of a design being shown.

5. The UI Pattern Factory

The UI Pattern Factory is a UI design library and gallery. The added extra from this collection  is that they sometimes share videos in each entry to improve the description of design problems and solutions. Entries are further enhanced by user-submitted examples of the pattern, which they archive in their Flickr group: UIPatternFactory.com. A very comprehensive collection.

6. Web Design Practices

Web Design Practices is a gallery of web design patterns such as breadcrumb navigation with very thoughtful and comprehensive write-ups on each design pattern, often including statistics and helpful resources about a particular website component. This information is good when explaining why design solutions have been chosen.

7. Elements of Design

Elements of Design focuses on particular components of a web design such as login forms and site navigation in the hopes of inspiring designers, as well as to highlight prevalent patterns for typical website needs and features.

8. UI Patterns

UI Patterns is a UI design library that follows a weblog format where each post is a design pattern and a showcase of it in use on a website or web application.

9. Little Big Details

A great tumblr site that gives a daily dose of UI inspiration

10.Ultimate guide to table UI patterns

A rather short, but good,overview of types of table UIs as well examples.

I will add new ones as I find them, but so far this list is my new UI design toolbox.

Flickr Collections and Groups

1. Design Patterns

This Flickr collection maintained by Chris Messina is a showcase of unique and interesting interfaces on the web. The collection is very well-organized into sub-sets such as Drag and Drop interfaces and Calendar Views.

2. Design Patterns Group

In this Flickr Group, there are over 300 items that you can browse through to see interface design solutions and trends.

3. Web Form Design: Filling In the Blanks

Maintained by Luke Wroblewski, this Flickr set is a collection of images pertaining to web form design. This is an excellent and inspirational resource to have around for times when you are designing web forms.

4. Search Patterns

Peter Morville has a Flickr collection dedicated to gathering design to for effective search. For different types of search UI inspiration this an excellent resource.

I will add more resources as I find them, but for now, this will fill my UI design toolbox quite well.

What is the one brand you cannot live without (except Apple, Google and Ikea)?

Last week, after the latest Apple 'Lallapalooza, juggernaut, mother of all product releases' event for the Ipad 2, I began to think seriously about brands. I found it interesting that a brand (Apple) can command such a following for a product release. How do such brands develop such passionate followers ? Note: for the record I followed the release myself so partially this was a bit of self introspection. I started to think about the brands that are important to me and realized the the list was quite long. I started to wonder what brands other people felt strongly about. To get a more realistic idea of what these brands could be, I conducted a very unscientific study where I surveyed  my friends on Facebook and my Twitter followers (863 as of this writing).

The question posted to Facebook and Twitter was the following:

'What is the one brand you cannot live without (except Apple, Google and Ikea)?'

I chose to exclude certain dominating brands to get a better idea of some of the smaller brands in peoples lives.

Alphabetical result list:

Adobe Arla Artek BBC Bang & Olufsen Carhartt Copic Facebook Fender (2) Finn.no (Norwegian marketplace) Filippa K Flickr (3) G-Star Illy Leica Lego (2) Logitech Nespresso (pod coffee) Nikon Northface Norröna (outdoor equipment) Nikon Omega Pampers Paypal Pepco (electricity) Prophoto (photosite platform) Wordpress SVT (Swedish television) Senseo (pod coffee) Systembolaget (Swedish liquor retailer) Tiger Wikipedia Windows Vitra Volvo

If we look at the list we can see that it covers a wide range of consumer products with a few brands were mentioned more the once. Flickr, the photo-sharing site was the brand with the most votes (3). Next on the list, with two votes, we have Lego and Fender Guitars. Lego can be explained by the large number of my friends that have children at the moment. A bit of a surprise is Fender, the guitar manufacturer. Apparently, Fender products generate a great deal of passion from it users. Pod-coffee (Nespresso and Senseo) and Public Service Television (BBC and SVT) where, as a category, also voted for more the once.

So we can say that my friends and contacts value viewing photographs on line via Flickr, playing with Legos, playing Fender guitars, drinking good pod-coffee and viewing Public Television.

Statistics: 5 responses out of 185 friends on Facebook. 9 responses from from a Twitter following of 836 persons.

Infographic Resources

A week ago I got a question from fellow tweep @glvsn if I knew of any good in infographic resources for beginners. Now 2010 was THE year of infographics and there are thousands of examples of infographics, some better then others (actually allot better), but 'how to' resources are not as common.

After some tweets back and forth between myself, @axbom and @belos_theclouds we assembled a pretty good list.

I took this list and fleshed it out with a few other links of my own.

I hope you find it useful.

Huge Infographics Design Resources: Overview, Principles, Tips and Examples An excellent resource gives a brief history, design guidelines and some good examples of successful infographics

10 Awesome Free Tools To Make Infographics This is a very good list that points out some basics, but really summarises a number of key free online tools for creating infographics.

Good Inforgraphics This comes from the GOOD website, which just drips with good design.

Society of News Design (SND) - Infographics A comprehensive list of articles, blog posts and longer essays on inforgraphics. Can loose yourself for hours in there.

Books on Infrographics Good list of visual design basics as well as some more advanced graphic guides.

The Anatomy of an Infographic Article that describes the three components of an good infographic: visual, content, and knowledge.

Seven and a Half Steps to Successful Infographics A excellent post from visual journalist Sarah Slobin based on 20 years of infographic experience from New York Times, Fortune Magazine and CNNMoney.com. Nuff said.

Finally:

'Don't stand in the way, let the information tell its own story'

Old vs. New vs. Good

A prominent digital designer was in Tokyo recently, and shared a story about an experience he had in his neighborhood in London. He decided to embark on a journey to as many antique shops as possible, and to purchase antiques with particularly romantic stories attached to them. Unexpectedly, each of the shopkeepers surprised him with a consistent response to his question, "Tell me about this object." The dominant responses being, "Well, it's *old*." Or, "It's from the 1800s, and is really *old*."He found this response of "it's old" (and therefore it's *good*) quite puzzling. And then got to thinking how as a digital, "new media" person folks would ask him about his work to which he would respond, "It's digital. It's *new*." And by the same token, implicitly, it's *good.* He realized that neither "new" nor "old" are sufficient rationales to express quality. That the quality of "good" is something more. Like this story he related. It's a good one, for certain. -JM

From the latest Posterous post from John Maeda.

Noun Project: Visual Icon Dictionary

I have been fascinated by info-graphical icons for some time. They always struck me as the perfect design elements - simple and understood regardless of user culture or language. That is why I was very excited to read about the Noun Project. The Noun Project’s mission is to share, celebrate, and enhance the world’s visual language. Their goal is to collect and organize all the symbols that form our language into one easy-to-use online library that can be accessed by anyone. All the symbols on the site are completely free to download, and can be used for design projects, architecture presentations, art pieces - almost about anything.

Edward Boatman launched The Noun Project via Kickstarter with a simple goal: to build a site for "sharing, celebrating and enhancing the world's visual language." Apparently it was an idea the web was waiting for, because Boatman has already received more than double the project's original budget of $1500 !

The usefulness of the site is obvious to anyone who's ever used CopyPasteCharacter, a similar source of typographical symbols. But the addition of historical tidbits is what makes The Noun Project more than a handy utility -- it's like a design-history wikipedia to lose yourself in.

Read more at The Noun Project

The 30 Steps to Mastery

When I read this I was struck by the simplicity. Ben Casnocha extends a two-step process for “How to Draw an Owl” with a few more to proclaim how to achieve mastery:

1. Start 2. Keep going. 3. You think you’re starting to get the hang of it. 4. You see someone else’s work and feel undeniable misery. 5. Keep going. 6. Keep going. 7. You feel like maybe, possibly, you kinda got it now. 8. You don’t. 9. Keep going. 10. You ask for someone else’s opinion — their response is standoffish, though polite. 11. Depression. 12. Keep going. 13. Keep going. 14. You ask someone else’s opinion — their response is favorable. 15. They have no idea what they’re talking about. 16. Keep going. 17. You feel semi-kinda favorable and maybe even a little proud of what you can do now. 18. Self-loathing chastisement. 19. Depression 20. Keep going. 21. You ask someone else’s opinion — they respond quite favorably. 22. They’re still wrong. 23. Depression. 24. Keep going though you can’t possibly imagine why. 25. Become restless. 26. Receive some measure of praise from a trustworthy opinion. 27. They’re still fucking wrong (Right?) 28. Keep going just because there’s nothing else to do. 29. Mastery arrives, you mistake it for a gust of wind. 30. Keep. Fucking. Going.

Nuff said.

Cocktail Party UX

It is the Glögg season here in Sweden now and afternoon 'Glögg Parties' are quite common. Recently, I was at such a party where the the inevitable work question came up: 'What do you work with ?'

Ahh um. Since I am placed in the IT Department I usually say IT. Organisational charts are easy to understand.

'I work with computers and websites' which is sort of true, but not completely.

The fact is working with the web is difficult to classify easily and working with User Experience (UX) is even more difficult to describe. It is difficult to distil working with the web down to one single term. It seems we need that 'one thousand word image' that sums things up.

I feel there is a real need to for UX trading cards. (in development)

These cards would easily describe what a person that works with the Web into a series of easily consumable cards. Great for cocktail parties or meetings with the relatives !

These would be a cross between Stephan P. Andersons Mental Notes that describe insights into human behaviour and suggests ways to apply this to the design of Web sites to these IA One Sheeters assembled by Leah Buley from Adaptive Path:

Examples:

One Sheeters donated by Tom Dell'Aringa

So until these UX cards are developed these single sheets will have to do.

Happy Holidays.
Please drink Glögg responsibly.

A Tale of Newspaper Ipad Apps

So the hype has started. Somehow it all feels like 1998 when everyone rushed to throw up a website, this time it is apps.

This year, the Swedish Retail Institute(SWE) has proclaimed the 'Christmas Gift of the Year 2010 ' to be...

...the tablet computer.

Ironically, the product most often sited in this category is the iPad even though it isn't yet sold by Apple in Sweden yet.

The newspapers, who have eagerly awaited the tablet as their economic savior are falling over themselves to create just their flavor iPad app.

So far SVD has come out with their app which costs 185 kronor extra a month for subscribers. DN, Sydsvenskan and DI will soon follow. (Note: Bonnier's News Plus will include DN as well as numerous other newspapers. Looks interesting.)

According to a recent article by Dagensmedia the price level should land between 99-199 kronor per month.

Basically from a consumer perspective this means:

'To view the newspaper I already pay for on my iPad I need to pay 99-199 kr/month'

This is an interesting proposition but I think this tends to miss a point. There is  a clear difference between 'price' and 'value'.

What is the added value of the iPad app ? Why should I pay this ? Can I do more with the content ? Tell me. Show me. Something.

For me I am missing the innovation.

The best iPad apps are those that have been designed around the screen size and technical characteristics of the tablet. If newspapers want people to pay extra money, they need to offer more then just a PDF reader in iPad form.

They need to use the platform to rethink how they present the information. This takes work and I am willing to pay for this. I dont think I am alone here.

The funny thing is there are some really good examples of innovative News apps already in the app store one could have used for inspiration.

Two that come to my mind are Flipboard and New York Times . Both good examples of some innovation in the news presentation area and both free. Yes free.

So until these organisations lower prices or provide some innovative way of presenting the information I think newspapers will have a tough time selling very many iPad apps.

Time will tell.

Become An Intellectual Property Donor

Why let all of your ideas die with you? Current Copyright law prevents anyone from building upon your creativity for 70 years after your death. Live on in collaboration with others. Make an intellectual property donation. By donating your IP into the public domain you will "promote the progress of science and useful arts" (U.S. Constitution). Ensure that your creativity will live on after you are gone, make a donation today.

Download and print your own here. (More photos here.)

Source: Evan Roth: “Public Domain Donor"

Oral Traditions and Social Media

Recently I finished up reading the book Glut by Alex Wright. The book describes how man has dealt with growing information throughout history. The book takes a journey that visits taxonomies created by North American Zuni Indians, Inca messengers who used beads to record messages, development of the library systems up to the electronic world we live in today. You can view this books as a Information Architecture history book. I can recommend this book to anyone who works or designs for the internet. An interesting part of the book discusses Oral information techniques and its role in preliterate cultures. The book outlines the work of linguist Walter Ong and his book Orality and Literacy 1982. Ong introduces the idea of 'secondary orality' to describe the relation between electronic media and oral cultures. While electronic media does not exactly mimic the dynamics of the spoken word they have many of the same forms.  Ong suggests that the difference between oral and literate breaks down to a few core distinctions.

In some ways, we can view social media as a reemergence of of oral patterns in electronic form. If we look at the 'Secondary Oral' section in some details we can see that this fits very well into today's social media technologies. If we consider two popular social media sites - Twitter and Facebook - we can see that both of these fit Ong's criteria for oral media;

  • They acquire value additively and aggregatively.
  • They are empathetic  - usually written in first person (one can note here the limited success in automatic tweets and Messages)
  • They are participatory through their ability to invite commenting or re tweeting.

It is no surprise then, that people have taken to social media to the degree that they have.

If we look closely at how people use these modern electronic tools we can see that many bear resemblance to the spoken word. The conversational tone of emails, the shorthand and hashtags used on twitter and instant messaging seem to suggest the casual tone of speech. There is a natural tendency for people to use describe the web in 'publishing' terms but the reality is a web that enables both publishing and talking. I think as more people get online, this has less to do with their love to reading and writing, but more our deep seated desire to talk.

All of us are natural talkers, but a large part of the world still is illiterate.

References:

Ong, W. J. 1977. Interfaces of the word: Studies in the evolution of consciousness and culture. Ithaca, NY: Cornell University Press.

Ong, W. J. 1982. Orality and literacy. New York: Routledge.

Will Email Ever Die ? Someday...

Yesterday Facebook's CEO Mark Zuckerberg launched what he calls a "modern messaging system" to handle the convergence of different kinds of messages and bring them together under one social umbrella. He did not say anything like the speculative 'email killer' for the service but it did approach the 'next big thing' type of announcement. After reading about the service and contemplating the worth of a personal facebook.com email address (low) I considered the poor old email system.

Why Email Just Won’t Die

Worldwide email volume. Data from Radicati Group. Source: Gigaom

Over the years, various commentators have proclaimed the death of email, yet its usage continues to grow year-on-year. While many of email’s potential challengers (including instant messaging, IRC, social networks, microblogging, VoIP, SMS and collaboration software) have also flourished, none of them have killed email off, or even taken its crown. Even with the influx of a huge amount of spam that users have had to deal with, email stubbornly refuses to go away. In my eyes email will be tough to replace for the following reasons:

  • It’s universal. Just about everyone who’s online has an email account. Email works internationally and across cultures.
  • It’s simple. You don’t need to explain to anyone how to send you a file using email. The old post office analogy is effective and quite user friendly.
  • It’s asynchronous. Unlike IM, where both parties need to be online for it to work, emails are stored until the receiver is able to deal with them.
  • It has few constraints. Unlike some other communication tools, email enables you to send very rich messages: you can simultaneously email a bunch of people, include as much information as you like, use HTML to add formatting, and easily attach supporting documentation or files.
  • It’s controllable. Individuals and businesses can run their own email servers. You don’t need to rely on a third party to provide your messaging service.

In short, while some people don’t like using it, email is just too useful to be killed off.

The Future of Email

Email’s been around for a long time (in internet terms ancient), first appearing around 1965 and becoming popular in the ’90s. And while it is here to stay, that doesn’t mean that it can’t be improved upon. In fact, I beg for it to be improved. The basic messaging format probably won’t change significantly (it can’t, without risking breaking one of email’s primary advantages: its universality), there are plenty of ways to build on top of email and make it more useful. Companies like Xobni and Webyog (with its MailBrowser plugin) have made tools that can help users to search and organize their email, while Gmail’s Priority Inbox feature helps users to filter out their most important messages.

Tools for helping users to sift through their inboxes are just the tip of the iceberg.  Due to the sheer amount of communication that goes on via email, there’s a huge amount of useful data that’s locked away in many people’s inboxes. Companies like Gist and Rapportive provide interesting tools that help users analyse this data: find out more about their contacts, for example, or even discover who their most valuable contacts are.

While email itself won’t change, the tools we use for working with email will get much more sophisticated and powerful. The sort of technology that companies like Gist are working on is currently only available via plugins and add-ons, but you can bet that it won’t be long before similar functionality is baked into clients like Outlook and Gmail, and available to all.

That my 2 cents, what do you think the future of email will be ?

Information Presentation: 'A World of Tweets'

Real-time visualization of geolocated tweets around the world

A World of Tweets is all about playing with geography and bits of information. Simply put, A World of Tweets shows you where people are tweeting at from the past hour. The more tweets there are from a specific region, the "hotter" or redder it becomes.

This continuous collection of Twitter statuses also allows for the presentation of other interesting visuals as well as statistical and historical data about the tweeting world we live in. Through the activity of Twitter users it is possible to tailor a new map of the world that evolves during the day according to the timezones and the spreading of mobile technologies.

A world of tweets started as a personal project one rainy Sunday afternoon and transformed into a side project at frog design, Milan.

Stunning results

The Magic of Architecture: Photographs of Åke E:son Lindman

Continuing on the theme of Architectural Photographs I would like to highlight some excellent Swedish talent: Åke E:son Lindman. Åke  was born in Stockholm in 1953. He attended the School of Fine Arts (Konstfack) in Stockholm 1975 and has concentrated on photographing architecture since 1986. He continues to be featured in architectural publications worldwide, such as Wallpaper, AD German, AD France, Interior Design, Residence, Arkitektur etc.

To understand the breadth of Åke's work I can recommend his website.

Finally, if you found these photos interesting I can recommend Åke's recent book 'Pure Architecture' (SWE).

Enjoy.

iPad Lab Study Indicates Use Patterns

A recent study from Cisco Webex  summarises some of the use patterns if iPad users. The study sampled 27 (21 consumers and 6 business) iPad users and summarised the results. Some interesting points:

Business iPad users with a device provided by the company  tend to leave it at home.

“It doesn’t fit in my pocket.” – “It’s so fragile, I try to be careful with it.”

“I can’t really write on it—only really short messages.”

“It’s awkward to try to save anything. You have to go through iTunes.”

When it does travel with its owner, the Pad is part of a “business travel kit”

It cannot replace the true mobile device because of limited phone capabilities.

It cannot replace a paper notebook because writing on the iPad is too cumbersome (and the keyboard dock is not mobile at all).

Its primary function is for multi "tasking" (use parallel to another device).

Users complain that iPad does not allow multitasking on the device.

When you put an iPad in front of study participants, many instantly “correct” the orientation to their usual preference, before they know what app they will use.

From a design perspective the study made the following conclusions:

  • Design for shared use among dissimilar users (profiles, protection of privacy)
  • Design for limited mobility
  • Design to sync with devices the iPad does not replace (phoneand computer)
  • Compensate for the lack of a file system
  • Design for quiet multi"tasking and other quiet uses in shared space (e.g.,minimize uncontrolled sound and allow one"touch mute)
  • Recognize that the orientation preference is not exclusively determined by the app.