Recently, I attended An Event Apart in Minneapolis, convenient since I am a homegrown Minnesotan.
I really can think of no better way to turn your brain into swiss cheese than by attending An Event Apart. Each session had its own brilliance that on its own would make you rethink the way you do things. When your mind gets blown six separate times, two days in a row, your head hurts afterwards.
I furiously took notes the whole time and wrote up those notes as posts. I’m sure I missed a thing or two. Hopefully I captured the essence of the speakers’ arguments, but if I messed something up, my apologies.
When you think about attending such a conference, you might ask yourself, why do I need to be there in person? Couldn’t I just read somebody’s notes afterwards? Or might I not get the same by reading some of the speaker’s blog posts or a book he or she has written?
A really good session, in my opinion, is not about the how, it’s about the why. Not that some of the sessions didn’t go into some nuts-and-bolts, but these sessisions were not hands-on, here’s how you do this each and every step of the way sort of things. Blogs and books are great for that.
No, a really good session, through arguments and examples, stories and slides, humor and deep thoughts, compels you to try something new. A great session exposes youto something you haven’t done before and inspires you to take action, change the way you do things.
Based on my experience, I plan to focus even more on understanding users for the sites I work on, strategize more about content, focus on mobile and adaptive layouts, consult existing patterns for interfaces, humanize interfaces, work more iteratively, start using HTML5 and CSS3 techniques that will save loads of time and give Dreamweaver CS5 a try.
While I might have run across information about these topics before, now I feel the urgency in putting these techniques in the top tray of my toolbox, where I will use them more frequently.
Below, you can learn more about the insights I discovered in each session.
Web 2.1 (now in beta!)
In his talk on what he calls “Web 2.1,” Zeldman pointed out that communications have come a long way from when knowledge was in the hands of the very few. Now we can deliver that knowledge in an interactive way to nearly everyone, and they can use it not just in the comfort of their home, but anywhere they go, with their mobile devices.
Difficult challenges from when the web was young have become easier. Tools like CSS3 and HTML5 and the unleashing of typography on the web means that we can create a more beautiful, more robust web. We also now have an easier time of writing our code once and deploying it everywhere, due to the maturing of web standards. Perhaps because we no longer have to focus so much on coding for different browsers, more and more people are focusing on other key aspects of delivering a great web experience, including accessibility, usability and user experience.
Improving your user’s experience
Design research begins with listening to your customers, as Whitney Hess pointed out in her talk on user experience. This can mean making it easy for your customers to contact you about features they want you to fix, improve or develop, and then tracking those requests, prioritizing them and bringing those same customers in on the process of testing the features that are completed based on their requests. It can also mean asking lots of open-ended questions of your customers and encouraging customers to tell you about their workflow. With all of these methods of listening to your customers, it is crucial to make sure to dig deep and ensure you really understand the core problems people are experiencing.
However, your customers might not tell you all you need to know in order to address their needs. Hard data helps, too. This can include heat maps to see where people are clicking on your pages, as well as A-B testing, to see which variations of a design might be more effective. Looking at queries in search logs can also help you find both what people are interested in and what people are currently unable to find through your site’s navigation. Analyzing your site traffic is important as well; sometimes, even just understanding when people access your site can give you good insights.
When you think you understand your users, and begin designing solutions, make sure to check that those solutions are working every step of the way. Usability testing does not need to be complex. Just showing sketches and prototypes to co-workers or family members can be incredibly helpful. If you have some good volunteers, keep going back to them for input. While you can do a more scientific approach with test subjects and testing labs, some data is better than none. If you can test in person, rather than remotely, you can face up to the fact that your users might tell you that your solution sucks. You need to hear that in order to improve.
Keep testing and experimenting throughout the design process. Make sure everybody is working together as a team to solve problems: if you put designers and developers in different silos, you will miss out on key insights that can transform a site. Keep trying things and innovating. Continual improvement should be the goal, and always remember to keep your users happy.
Making design decisions
As you work on improving your user’s experience, you will make a lot of design decisions along the way. Jared Spool shared a number of insights on how we make design decisions. Whether a site is designed well or poorly, somebody made the decisions that led to this outcome. Being conscious of how you make those decisions can help improve the quality of those decisions.
For example, you could choose to just design a site that works great for you. If there are enough other people just like you, this can work wonders. If our users are not like ourselves, however, we need to understand those users better. You can end up specializing in catering to a particular type of user, know them really well and be able to meet their needs in the way they want them to be met. Another approach is to focus primarily on the activities those users need to do and make it as easy as possible to do that activity. A step beyond that is to recognize that while making an activity easy is important, it’s also crucial to make the experience in between activities just as wonderful and consider not just the process of completing an activity, but the entirety of the experience revolving around that activity, including its outcome.
In making these decisions, you can have hard and fast rules for how these decisions will be made, or you can teach somebody how to make informed decisions, using certain techniques as guidelines. Rule-based decisions may be necessary when the person who needs to decide something hasn’t mastered the techniques that go into making such decisions, but rule-based decisions tend not to handle edge cases very well and can swiftly become too dogmatic. Having someone who understands the necessary techniques and tricks to make an informed decision is preferable, if possible.
The more you move from designing for yourself to designing for others in a holistic way, the more tools you need in your toolbox, such as usability testing, field studies and personas and patterns, which also becomes more expensive. In-house designers may have more success at designing complete user experiences, simply because it takes so much time to understand the totality of the factors that go into providing an excellent experience for varying types of customers.
Focus on content
People do not come to your site because they want to look at its design. They come for the content on your site, as Kristina Halvorson explained, in her talk on content strategy.
Good content is not telling people about your long personal history or sharing your mission statement. All of the work you have done to understand your users goes into determining what your users really need, and easily providing that content for them.
The entirety of your content should focus on delivering your core message—your brand proposition—whatever that is. On any given page, you have just an instant to create an emotional reaction. Do that well, and you may have a few seconds more to get your primary message across. If people find that compelling, you may have a few minutes for users to understand a few secondary messages. Only once all of those are true will all the nitty gritty details matter, and if you have too much content clutter, it may get in the way of users finding the information that really matters.
All of this is important on every page, not just your home page. Every single piece of content out there, whether on Facebook or an FAQ page. So it’s crucial to remember that content strategy is not just about the content, but about how people will create that content, both initially and on an ongoing basis.
Engage people with your content. Don’t forget humor, where appropriate. Make sure your site’s design enhances the content, rather than getting in the way of it. Content is a necessary component of design, not an afterthought.
Remember how the web works
The web does not necessarily work in the same way as print. Jeff Veen reminded us of a few key principles to keep in mind when working with the web .
Technology disrupts things. We need to remember the core value we are delivering our users, rather than latch on to the way we deliver that value.
We can easily dwell on perfection, but in Jeff’s experience, iterating quickly beats perfect iterations. Get something out there and continue to work on it and improve it once you do so. People may not always agree on the best way to accomplish something, but sometimes it is better to just create it, see how it works, and come to a consensus once people see how something works in practice.
The value of some things won’t become apparent until a lot of people start using it, and once they do, a network effect can make something more valuable than anyone imagined.
Finally, the challenge of the web is that information has been unshackled from the cost of creating something that delivers that information. This allows the web to spread information easily and cheaply, but also threatens those who are trying to monetize the information they worked so hard to create. Jeff believes in striving for openness, rather than clamping down on the web.
Mobile on my mind
So you understand your users, you’ve developed your content, so now you’s ready to start designing a site optimized for a grid 960 pixels wide, right?
Luke Wroblewski urged us to take a step back and think about developing for mobile first.
Soon, more people will be accessing the web via their mobile devices rather than with their laptop or desktop computers. So shouldn’t keep your biggest potential audience at the forefront of your mind? The constraints imposed by mobile devices also help you to focus on the core actions people most want to do. When people are on the go, they can only give a brief bit of attention to whatever you are offering, so you need to target your content and your interface like a laser.
If you do this first, that tight focus can be used to make the desktop experience of your site much easier to use, with less extraneous stuff to get in the way. Targeting mobile means optimizing for speed, and your desktop users will welcome that as well.
Because of the plethora of mobile devices, delivering your interface for all of them will take some extra effort. Mobile devices, particularly touch devices, have certain capabilities that desktop computers don’t, at least yet. Design for these capabilities and take advantage of them where you can.
Keep things flexible
One of the key promises of the web is to create your content once and deliver it everywhere. Ethan Marcotte discussed some ways for making our designs respond to their environment.
Screen sizes vary. Monitor resolutions vary. Even with monitors the same size and resolution, browsers may be open at different sizes. How do you optimize the layout of your content for the space available?
Rather than believing this to be a flaw of the web, Ethan encouraged us to embrace this aspect of the web. He developed a number of techniques which he calls responsive web design, which includes using a flexible grid and flexible images that adapt to their environment using CSS media queries. Varying the width of elements based on the available space only goes so far, and at certain break points it is best to completely change a layout by altering the number of columns, the type size, image sizes, etc.
I think I see a pattern here…
You are getting close to actually designing your interface, so now it’s time to dream up a whole bunch of new and innovative designs, right?
Erin Malone might argue for you to take a moment to step back and consider that there might already be existing patterns for how others have solved these same interface problems before.
If you have the time, you can investigate and research for yourself how others have tackled login boxes, for example. Or you can take a look at the many resources out there of those who have already cataloged such things and can give you advice for some of the necessary features you might want to include in order to meet common user needs.
Either way, you can take these general patterns and turn them into more specific components that will match your site’s branding and common user interface. Doing so allows you to adapt these components to whatever multiple uses you might have for them within your site. You may also want to build up or use an existing code library specifically tied to the components you are using, so these building blocks are ready to plug and play.
Making forms suck less
You may be ready to add a whole lot of whizbang to your site, but Jeremy Keith advises you to think about the basics of interactivity on the web: links and forms.
Think carefully about how you will enhance these fundamental tools. The way you used hover effects in the past might not be as tenable with mobile devices. Nobody likes forms. They almost aways suck. So do your best to make them better.
We have far more tools now to help us. Complicated hover effects that used to require Javascript can now be done with the much simpler CSS. Similarly, some form validation that required Javascript or server-side programming can now be done with HTML5, and more form input types can be created just with HTML5, rather than having to design common form interfaces like date pickers for each and every project.
Whizbang tricks like Ajax are useful, but make sure to begin with the basics. Make something work with just a standard link or form and then enhance it with Ajax or other techniques, so that no matter what, somebody can use your interface.
Remember that for all the fun we can have with Javascript and CSS, sometimes the best user interfaces and the best content are simply text. What makes for great interaction is not flashy effects, but real human interaction.
Don’t forget to be human
Robots are not using our sites, Aaron Walter reminded us, and we need to design for humans.
Making things usable is good, but a pretty low bar. Chefs want their food to be more than edible. How can we make our sites pleasurable to use?
Creating emotion through what boils down to binary code is an art, but giving personality and character to your design often begins with humor. Say sorry creatively. Provide people with visual rewards when they overcome drudgery on your site. Take risks. You don’t want the fun elements to overwhelm your site, but to enhance the essential content.
Cocoon
In the movie Cocoon, the old regain the vitality of their youth. Eric Meyer explained how the same is true of a number of oldie but goodie CSS techniques.
Rather than worrying about which box model IE used to use, for example, we can now choose the box model that makes the most sense to us, using CSS3. Media queries give us a lot more flexibility. Rounded corners no longer require extra HTML, images or complicated CSS. Neither do gradients. Opacity can be used live in the browser, rather than just in Photoshop. Zebra stripes no longer require labeling each table row even or odd.
The complex has become simpler.
Upgrading the interface
Dan Cederholm further demonstrated how CSS3 could upgrade the interface for those who can take advantage of it.
Some people may still be using older browsers, and that’s fine, because if we do things right, they can still receive a usable, if less elegant, interface, with which they can still do what they need to do.
While there are some critical functions such as layout, that CSS3 might not yet be stable enough to handle, there are certain visual enhancements it can already tackle, such as rounded corners, gradients, drop shadows, opacity and multiple backgrounds.
With most of these new CSS techniques, you can also use Javascript libraries to help users with older browsers to get the same experience, if that is really critical.
What’s in your toolbox?
One tool that can help with all these new fangled techniqes? Dreamweaver CS5, according to Adobe’s Greg Rewis.
Rather than using Firebug to test CSS and HTML tweaks, you can now do so more easily within Dreamweaver, saving yourself the time and possible errors involved in recreating those tweaks in your source files afterwards. You can also more easily see complicated PHP interfaces in the Design view of Dreamweaver and find the source files necessary to make changes, including modern CMSs like Drupal and Wordpress. (I have a lot of concerns about this feature.) When in Design view, you can also visually navigate to other pages that need to be edited. You can more easily work with HTML5 and CSS3 with a free expansion pack for Dreamweaver CS5.
Summary
Some of the key insights I got out of An Event Minneapolis are as follows:
- Yet again, the web is new again. HTML5, CSS3 and the increased viability of web fonts means not so much that we can make more beautiful sites, but that we can do so much more easily in a standards-based way that is easier to change as necessary.
- Focus on your users. Listen to them. Care about them. Show them what you are working on. The work and care you put into loving your users transforms everything else you do. This takes a lot more work, but the improvements in the experience for your users is worth it.
- How do you make decisions about what you’re designing? You need to know the difference between your needs and your users’ needs. Think about how you make decisions. Are the rules you’re writing too dogmatic? Would you better off teaching somebody to fish, rather than providing a rulebook about fishing?
- It’s the content, stupid. That’s why people come to your site. Your content should focus on your users’ needs. Prioritize your primary and secondary messages. Think not only about the words in your content, but how it is created, and who is creating it. Everybody needs to be on the same page for content strategy, no matter where on your site their content show up, social media included.
- Don’t let technology disrupt you. Focus on the core value you are providing, not on the method of distribution. Innovate early and often and get a product out there, where people can use it, and you can continue to improve it based on feedback.
- The web is no longer just screens on a desktop or a laptop. Pretty soon, more people will access the web on mobile devices. Focus on that first, because the focus that mobile development requires benefits users on desktop and laptop devices as well.
- New techniques allow you to make your design more adaptive to the browser canvas, no matter its shape or size.
- You don’t have to continually reinvent the wheel. Others have solved the same interface problems you are working on, so study others’ solutions or look at research have already done on common patterns in design, then make these solutions your own.
- When you boil it down, most interaction on the web involves forms and links. Understand how those work and build from there. Good interaction is essentially something happening between two humans, rather than between a human and a computer.
- We humans are emotional critters. We like personality, character, humor. We can make our sites not only usable but pleasurable.
- A lot of the CSS techniques we used to use are much simpler with CSS3. Most importantly, many things that required Photoshop can now be done live in the browser. We can do this in a way where users with older browsers don’t suffer.
- Dreamweaver CS5 may be a useful tool for helping you to work with this plethora of new tools.
- Don’t fear browser compatibility issues. Javascript libraries can help, and besides that, the user experience does not have to be exactly the same in every browser.
These are the essential nuggets. More are available in the blog posts I did on each session. However, to get the full experience, you will need to attend An Event Apart yourself.
