Big (D)esign has come and gone. I was fortunate to be part of the planning team that put this successful (yes, I can now call it that now ;-) conference. Over the past months, I was able to see behind the scenes of the conference: event planning, sponsorship, contacting speakers, scheduling, logistics – and got to play a part in many of these activities. It was great to see people from UPA, Dallas Refresh, and IxDA (among others) come together to put this together – that and the 500+ people who ended up attending!

In the past Dallas had been home to a couple of User Experience conference, we’ve had Wemaster Jam, Design Thinking, and Forrester had a Customer Experience Forum here last year. But none of these were happening in 2009. While Dallas may not have any UX focused conferences, we have an abundance of local clubs. I really mean abundance… Depending on what you’re interested in, you could literally go to a meeting about every night.

Dallas Refresh, UPA, IxDA, DSVC, AIGA, Adobe, Microsoft, Java, Ruby, Facebook Dev Garage, Mobile Monday, iPhone Dev, Social Media Club, the list could go on and on. That’s not counting special community events, like DevHouse, HackDay, BarCamp, etc…

Dallas really does have a really good, supportive community of Designers, Developers, Usability Professionals, and many others in User Experience related fields.

If you missed Big (D)esign, here’s a quick video I put together to learn a little more:

Big (D)esign 2009 from Jeremy Johnson on Vimeo.

And of course we had an afterparty ;-)

Big (D)esign After Party from Jeremy Johnson on Vimeo.

If you want even more! Here are some photo galleries on Flickr:

• My photos
• T. Scott’s sketching
• Carissa’s photos

I hope if you’re in the Dallas area, that you join in and become part of the community, join a club, attend a meeting, volunteer, share your knowledge, and continue to watch our community grow!

Starting in 2005 when returning from SXSWi a coworker and I would put together a trends presentation talking about up-and-coming technologies, patterns, websites, etc… and 2008 is no different. The presentations keep getting longer and longer, as innovation keeps building on the previous year, moving faster and faster. This year my co-presenter was Dustin Askins of Travelocity, and we gave the presentation internally to our UX groups, and just this week at the Dallas UPA Chapter.

Why SXSWi? I think it’s really good for getting a pulse of what’s going on in the User Experience field. You get to meet with a wide verity of people from different practices, and hear from some of the top web professionals. An while there are many great conferences (like UIE, IA Summit, UX Week, etc…) SXSWi is consistent on it’s wide ranging topics (great for “T-Shaped” People).

When looking at trends across technology, marketing, UX, and business you start to see patterns of what the leaders in their respective groups are expecting for 2008 and beyond. Things I keep seeing rise to the top: Mobile, Open Platforms, Data Control, Mixing Virtual and Reality, Semantic Web, Interoperability, and Location Based tools (see slide 33). None of these are unexpected, I sure we’d all agree these are hot items that will effect multiple areas.

I’ve never posted these presentations before, so I have 2005, 2006, and 2007 to post along with 2008. So if you’re new to the web and User Experience, now is your chance to catch up on a couple years worth of knowledge.

So say hello to 2008:

| View | Upload your own

2007 On SlideShare

2006 On SlideShare

2005 On SlideShare

I also have most of this presentation in a podcast (I think my recorder battery went dead…), so listen in. Hopefully I will continue to keep this trend of my own, it’s always interesting to look back…

[EDIT 05/12/08]
Here’s some video from our UPA talk:

Me & Dustin speaking @ Dallas UPA from Jeremy Johnson on Vimeo.

As a Designer, I sometimes need to evaluate different technologies and platforms from a Designer’s perspective. Why is it important to get a Designer’s view? As Designers we can quickly be boxed in with inflexible UI layers, unusable sets of standard patterns, and the inability to create a great experience. By reviewing and testing, we can determine the pros and cons of a given technology solution. In honor of Eclipsecon 2008 ;-) I’ve put together a presentation on a popular application platform – the Eclipse RCP.

Eclipse has it’s roots as a development IDE, and while that’s very efficient for developers, for non-developers it’s not very user-friendly. For this particular technology I broke up the potential problems into four groups: Visual Style, Structure, Usability, and Focus. These were four areas where Eclipse had problems, when looking across a large number of Eclipse based applications.

The Designers View of Eclipse:

| View | Upload your own

To be fair, they are trying to fix these issues, and some very smart developer/designers are creating good applications using Eclipse. But, projects without proper UI layer specialists (Designers and Developers) will default to the problems listed out above. From a Designer’s view, it’s not easy to get a great application out of Eclipse.

One great presentation out of Eclipsecon 2008 is from Morten Moeller, titled: “Designing Business and Technical User Interfaces in Eclipse RCP Applications” which basically states current Eclipse User Interfaces could use some work, and how to made them better – with technical examples of how the presentation layer works.

This is not to say that Eclipse, as a platform is not capable of great things, but just that current popular Eclipse patterns that seem to be prevalent across most Eclipse based applications are not great from a Design/usability perspective

Remember, while the Designer’s view is very important (after all I’m a Designer ;-) there are other business needs that weigh the overall solution. Such as: development time, current skill set, scalability, etc…

With experience becoming an important factor in differentiating products, having a flexible UI layer is becoming a major factor when choosing a technology to base your product on, so if you’re part of a team evaluating different technologies, make sure your team takes into account the Designer’s view.

If you’re an Interaction Designer, I’m sure you’ve noticed a new design pattern in the past year – one that doesn’t really seem to have a proper name yet. In fact, you’re probably already incorporating this pattern into your designs. It seems like almost every major redesign is leveraging this pattern to help hide complexity: Amazon, Linkedin, TripAdvisor – and sites like Target, Google, and Yahoo have been using it for awhile. It’s a design pattern I’m calling “Revealing Interfaces”.

| View | Upload your own

I have a habit of taking screenshots of interesting UIs. I have a large collection that I browse through for inspiration when creating something new. I started the above presentation to help provide some context for what I was trying to do with some of my own Designs. I’d been interested in reveling interfaces and recently I came across a couple of pieces that when put together gave me the idea to help better explain this pattern.

The first was when John Maeda came to my work to give a talk. While reading “The laws of Simplicity” I came across this quote:

“Hiding complexity through ingenious mechanical doors or tiny display screens is an overt form of deception. If the deceit feels less like malevolence, more like magic, then hidden complexities become more of a treat than a nuisance.”

I like the fact that while a revealing interface could harm traditional usability heuristics by “hiding” away functionality, once someone actually uses the interface, they could be delighted by the options revealed to them.

The second was when around the same time I saw a post “Hiding Complexity” over at one of my favorite blogs (future perfect by: Jan Chipchase). These two photos so elegantly demonstrate what the purpose of a revealing interface is: removing initial complexity.

At it’s most basic, it’s really something as simple as a drop down menu on a website. But in the last year or so, with more highly skilled people at the helm, pushing the limits of XHTML/CSS/JavaScript/AJAX it’s becoming much more.

No longer are the days of waiting for a full page load just to update your status. With a single click you have access to power user features that used to be buried three pages deep. An entire site can be navigated from the main page, without overloading the front page with tabs or links.

The interface becomes more fluid, interactive, and more like a conversation. In some places it can even read your mind ;-) “Yes, Netflix I was wondering what the plot of “reign over me” was, thanks!”

Along with these new reveling interface patterns comes a new budding visual language to denote when something can reveal more information – and when does it just take you to a new page? I’m sure there are a new pile of accessibility concerns with the extra levels of DHTML and JavaScript – and how does usability change, when you can’t really ask the question “where would you click…” or “what do you expect…”?

Please take a look at the embedded presentation, hopefully this post can help start defining this pattern and get the conversation going – and feel free to start that conversation below in the comments :-)

Yesterday I got to hear John Maeda speak at Sabre as part of the Wundermind series of speakers. I’ve read John’s book (The Laws of Simplicity), and really enjoyed it. He gave a great presentation – it’s rare to hear someone who really gets both technology and design (and he’s met Paul Rand!).

So when is simple, too simple? A great quote near the beginning of John’s book reads: “Imagine a world in which software companies simplified their programs every year by shipping with 10% fewer features at 10% higher cost due to the expense of simplification.” Maeda uses the iPod as an example of a product that has succeeded with this model. I also see this in the iPhone. As a new iPhone owner, I’ve been able to discover some great ways Apple’s removed features, without diminishing the experience, and simplified the iPhone UI.

As part of a User Experience department that supports products that are 10-20 years old, you can imagine the complexity that has crept into the products over the years (and most of those years were without a Designer’s touch!). Every year new features are “needed” to keep-up with the competition and look good in a comparison matrix. As someone who strives to simplify UIs, and create great experiences, I’ve learned a thing or two from the iPhone.

The iPhone has really delighted me at every turn. I’ve read a lot about what people feel was left out of the iPhone. I’d like to show how in one case removing a feature, actually improved the experience.

Copy & paste. The iPhone does not have any copy & paste functionality. This always shows up on the list of iPhone “wants”. How can a Smartphone work without it! Smartly, Apple reinvented what copy & paste should be on a phone:

1) Phone Number in a SMS

When you get a phone number in a SMS, it’s blue and underlined. This is the standard click (or tap I guess) to call you see on the web. But, what if you don’t want to call the number? Maybe you want to copy it to a contact, or SMS the number. Added to the UI only on lines with a phone number is a little blue arrow that when tapped shows the most common tasks you would do with a phone number: call, SMS, add new contact, add to current contact.

2) Emailing a link to someone

Sharing is built into the phone, no need to copy and paste. When you’re on a page just tap “share” and a email is started for you! In this case – the traditional method would be: copy link, switch to mail app, open new mail, paste link – that’s four steps reduced to one.

3) Emailing a YouTube link

Same as #2, you’re able to share a youtube link as well.

4) Common address information

The iPhone “knows” you. It knows you from your address book, notes and more.

5) Content from Notepad

It even surprised me by autofilling something I had just typed into notepad!

By looking at tasks people perform on a mobile device – Apple has created a “smarter” device. Something small, that hides the complexity and “just works”. Although I’m sure someone will point out – this is really a “forced workflow” leaving out power users. I think it’s a fare trade-off, simplicity is a feature. Tell marketing to add it to the comparison matrix :-)

Also check out Fellow Sabre employee Stephen Anderson’s 7 User Experience Lessons We Can Learn from the iPhone

Awhile back I posted my “Universe of User Experience“, where I wanted to show all the pieces that needed to come together to create a great experience. This was very helpful in educating people on what User Experience was and why all the pieces were necessary. But this did not address the issue of explaining the roles of the people doing this work… So, who feeds these experiences?

Many people still don’t understand the different roles we play as Designers. Some people think “Visual Design”, while others think “HTML Coders”. “Web Designer” is a term that should only be used to describe what you do to your grandparents.

While in the past we’ve had distinct roles, the trend is to move towards “User Experience”, someone who understands many different aspects of the design and development process.

Using the ever so trendy SlideShare, you can view my quick presentation here:

You can download the PDF here.

SXSWi has come and gone again, this was my fourth time to attend and it just keeps getting bigger every year. When I first visited in 2003 (or was it 2002?) Bruce Sterling was still throwing SXSWi parties at his home and FROG Design hosted everyone in their office, unfortunately that doesn’t really scale to the size of the conference today. But, the panels were as diverse and interesting as ever – and I came back with the following brain-dump:

(note to readers, I tend to take notes in bullet-point format, which is reflected below)

Emerging Social and Technology Trends

(More detailed notes here)

• Check out: http://outside.in/
• Check out: http://www.indie911.com/
• The age of sharing your information publicly is here to stay, it’s normal for “kids” – they wonder why you are not blogging what you had for lunch
• Room to add more control, maybe you only connect with people you’ve met with in real life (RFID to Linkedin?)
• In india you can send an email to a post address, and a post to an email address

Getting to Consistency

(More detailed notes here)

• If working on a suite of applications, look for “connection points” – the apps don’t need to be 100% consistent
• You don’t need to be consistent just for legacy sake
• There is room for some discovery within a UI
• Sometimes a clean break is the best way, when upgrading applications
• Remember: Goals no Features!!!
• Integrate what is valuable and saves time
• See when your users evolve. Adobe noticed things like RAW workflow, widescreen monitors, etc… Breaks based on user habits
• Watch out for reusing objects if they don’t provide the same experience
• Design for workflows
• Capture what the user wants to do
• Adobe found users all most always select the advanced mode when given a choice, they feel like they are missing out on something if the don’t
• Pick up on user patterns
• BMW has consistent “signatures” from the MINI Cooper to the top of the line BMW
• All about goals, again – goals not features
• Make it easy for developers and designers to stay consistent with guidelines and toolkits
• Use peer review to pick up on problems in consistency

Stop designing products

(More detailed notes here)

• Design from the outside in
• Check out: http://www.flickr.com/about/

Designing for Convergent Devices

(More detailed notes here)

• 10ft design vs. 2ft design vs. 6in design
• Control, Branding, Standards, Trust
• Check out: http://www.zannel.com/
• Look for the “Golden Pathway”
• Remember the ecosystem (not just your product)
• Support: Environment, Activities, and Device (Display, Input, and Platform)
• Remember things like: Screen, Font and Colors, Input Devices, Focus States, User Feedback, Task Complexity, and User Expectations
• Have the web be a companion for mobile. If possible have users fill out information on the web, then interact with the mobile experience.
• Keep it simple, get only NEEDED data upfront – and continue to fill out a user profile as your “relationship” goes on

Mobile Design

(you can download the full presentation here)

• 60% mobile users access mobile data once a month
• XHTML-MP is WAP 2.0
• Common devices to test for: Nokia S40, RAZR, Treo, “Give-a-ways”
• Check out: http://www.deviceanywhere.com/

Moving Corporations to Accessibility

• Use tools like: Contests, Awards, and Classes
• You need a evangelist within the company
• Have guidelines and resources for your developers
• Check out: http://www.webaim.org/

Get Unstuck

(More detailed notes here)

• Make sure your team feels like they are doing good work, being productive, and fulfilled
• Have an open process, open up to other teams in your organization
• Work with Design towards a goal
• “Just add value”
• Stop too much process
• Find the middle ground between user needs and business goals
• Have one member of your team always focused on the end solution

Mobile Application Design Challenges

(More detailed notes here)

• Check out: http://radar.net/
• Remember to be aware of the number of clicks in the UI
• Check out: http://www.smallsurfaces.com/

Design Patterns

(More detailed notes here)

• Focus on solutions, encourage good behavior, and remember – “reusable…”
• Most of the good design work is done in the “fuzzy middle” (hard to provide guidelines for)

Customer Service is the New Marketing

(More detailed notes here)

• Check out: http://www.zappos.com
• Zappos has a “Culture Book” they put out each year
• A recurring job title I keep seeing from the panelists is “Community Manager”
• Find ways to get closer to the customer, let your call centers talk to design/development
• Admit mistakes
• On one forum 60% of questions are answered by users
• 30boxes – 3 employees, 30,000 users, forum only help – they spend about 4-6hrs a week on customer service

Truth about Mobile

(More detailed notes here)

• Does your mobile strategy substitute, or complement your experience?
• Advertising is not ready yet
• Data usage is almost there (currently 32%), better to be ready sooner then later

SXSW also had a good mix of keynote speakers, with Will Wright’s being my favorite of the bunch.

Overall it was a great experience – I learned a lot, while being inspired to do more.

So there you have it. My brain dump, remember podcasts and vidcasts will be available here in the near future.

Recently a developer was going over the browser baselines for a project, they listed them as: IE 6.0, Mozilla 1.5, Netscape 8.0, Opera 9.02 and Safari 1.2. I saw this and thought WAH? Mozilla and Netscape? No IE 7? Safari 1.2? Opera? Let’s take a look and see what should be the baselines for browsers in 2007.

First stop was to check out some global stats:

Looking at these two graphs, I think it’s safe to limit the browser testing to IE 6, IE 7, IE 5 (still has more market-share then Safari) Firefox and Safari.

A couple of points:

The next question I hear from developers is “Why not just develop for IE? Look at the marketshare?”

Well let me tell you…

1) You should be developing for a Web Standards compliant browser (Firefox) then “breaking” it for IE and other browsers. This is the current trend in modern web development, get on the train.

2) Firefox now has a large enough browser share to matter.

3) Mac users (although low in % for browser share) are a segment of the market you want to cater to. They are willing to pay a premium for better experiences, and a large number of them are part of the creative class, making them a very vocal part of the web (writers, producers, designers, bloggers, etc…). A group you don’t want badmouthing your products.

4) Ok, but why Opera? Well Opera really has the most potential out of the lot. This is due to Opera’s strong push to be included in embedded devices. I’ll just take one of the many examples – the Nintendo Wii – it comes with the Opera browser built in, and there are now 4+ million Wiis out in the wild with more and more being sold every day (or how about the 300+ million Nintendo DSs with Opera?). Opera is even being included in some DVD players.

So what should the browser stats be?

Here is my idea for some general guidelines when browser testing:

If you notice, I’ve included %s next to the version numbers. This tells the developer what percentage “correct” it needs to be from the supplied mock-ups. Where as it needs to look 100% in Firefox, it only needs to be functional in IE 5.5 and 95% in Safari.

How do you judge 95% in Safari? This should be up to the designers, if a image is off 10px off or some text is a little larger then in Firefox, then that should be OK – but if the tabs are broken and text is hovering outside a div, that may not be OK – it’s really up to the architect of the experience.

I’ve attached a PDF to this post with some more information, something to pass on to your developers if you see they are testing for AOL 4.2 or something equally as awful.

In web design there are a couple things that are for the most part consistent across sites to provide a more uniform experience. Things like most logos tend to be on the top left of a page (as well as link to the homepage) and the search goes somewhere near the top right. Besides browsing the web, something most internet surfers do is shop. It could be clothing, electronics, jewelry, whatever – but this common experience has becomes very inconsistent when it comes time to buy.

I’ve sampled around 30 different product pages to see where the “action” is.
First, It’s not always called the “buy” button, I’ve seen:

• Add to Cart
• Buy this item now
• Add to Shopping Cart
• Buy Now
• Add to Bag
• Buy it
• Order
• Add to Shopping Bag

Some buttons have been crowded around product information, while others enjoy a nice amount of whitespace. The locations very, but as you’ll see here, groups do begin to form and a clear majority is formed:

(download as a PDF 1mb)

You can also click on any of these images to view via flickr

(download as a PDF 1mb)

Looking over these 25+ product pages, the thing that stands out the most are the visual design treatments. The amount of whitespace, color, size, etc… This is what draws the eye on a page, and keeps the visitors on your site from getting confused or lost.

Over the past couple of months I’ve seen some new user interface ideas on some popular websites. Some were improvements, others a bit awkward to use. I’ve collected screenshots of these new UI elements and talked a bit about each of them below.

Hover Bread-crumbs:
view: http://www.apple.com/macpro/intelxeon.html

I’m actually not a big fan of bread-crumbs, but adding it as an interaction when hovering over the logo is a great idea. Visitors typically go for the logo when they are lost or can’t easily find a home button. So displaying the site path at this time is perfect. I hope to see more of this interaction.

iTunes Navigation:
view: http://beta.blockbuster.com/online/home

I like the iTunes style navigation, but here it’s not working. A combination of navigation conventions being ignored and the fact that it’s slow and poorly implemented make this a big don’t. This type of navigation can be done well like on the radiotime.com site.

Under-tabs:
view: http://maps.google.com/

I like the interaction of having quick options when searching Google maps. the quick transition from map, to business, to directions is usable and easy to understand.

Browsing
view: http://beta.blockbuster.com/online/home (as well as wetpaint.com signup and iTunes)

When browsing something visual like templates, CD covers, DVD covers, etc… this is a great way to browse a selection with out taking up too much screen real-estate.

The Disappearing Main Nav!
view: http://www.yourpsp.com/psp/
also seen: http://www.brainsonfire.com/FIRE/

I’m not sure about this one. I know the two examples above are more “experience” sites so it’s ok to bend the rules, but in most cases removing the main navigation is not a good idea. At least on the PSP site, when you hover over “Home” you get the main nav items without having to go back to the homepage.

All of these are still too new to be trends, but it’s something to keep your eye on…