User Experience (UX) design is anchored by its foundations in psychology and sociology, centering around the human experience. The application of UX, like its foundations, relies on observable theory and continual discussion, often coming down to a matter of informed opinion. These opinions range from its best practices right down to its tools.
User Experience (UX) design is anchored by its foundations in psychology and sociology, centering around the human experience. The application of UX, like its foundations, relies on observable theory and continual discussion, often coming down to a matter of informed opinion. These opinions range from its best practices right down to its tools.
Wellfire was invited to be a part of the panel for DC’s Web Content Mavens on User Experience for Developers. Along with Scott Savage of Boost Labs and Jordan DeVries of BraveUX, the panel discussed an introduction to User Experience and how developers may find that they are engaged in doing some of UX already. I centered my presentation on tools that developers can use to get started in UX as well as some User Experience philosophies that hold true for Wellfire Interactive.
Following along with a UX project flow, there are three main phases of tools: Strategy (Discovery), Development, and User Testing. Each of these may be used throughout the project lifespan, depending on the project needs. Each of these phases is part of an iterative process where you may need to revisit requirements and functionality for any given feature or enhancement of your product.
UX is completely about the user. Users are human and share similar emotions and experiences. You, too, are a fellow human. The most basic and important tool for UX is you. Use your experiences to gain an intrinsic understanding of the needs of your product and how people will use it, which will help you craft your project. Augment your own insight with that of those around you; people are pretty willing to share their experiences with anyone who is willing to listen.
As a developer, you’ve had successes and failures in projects. These project experiences can help mold your project processes and outcomes. It’s important to take your successes, with a fair warning from your failures, and create a library for your future projects. In turn, also look at and internalize the successes that others have made.
Don’t forget your pen and paper. As we move to a paperless society where everyone has a device with them 24/7, it’s important to remember that paper and pen won’t be going away and should still be the first thing that you reach for. There’s no need to take time to set up a project environment or get the right fonts, colors, or image assets when you can just grab a notebook and jot down ideas. If something doesn’t work right on paper, it won’t make much sense in code either. Drawing boxes and arrows on paper is much easier and quicker than doing it in code.
Wellfire places interactive wireframing, visual design, and full-stack development into a single development stage. While practicing an iterative process, each of these informs the other and provides quick feedback on what’s working, what’s not working, and what the client may think. Each concentration should be able to use the tools available. There are three types of development tools: design-centric, development-centric (or code-based), and hybrids.
Design-centric tools are fully-featured applications that designers can take from wireframe to fully-realized visual layouts. These may offer little to no interaction or exportability to code. Tools like Adobe Illustrator and Bohemian Coding’s Sketch may be the best to go with here; an essential feature of each is the artboard, where you can define a set of dimensions (aligning with screen-size) for each device you plan on supporting. This helps with responsive design, a must in today’s market, but assets will need to be relaid out for each artboard. Design-centric programs are familiar to the vast majority of designers and developers.
Development-centric tools center around code frameworks, typically for CSS. Full control over the HTML, CSS, and JS plus a micro-view of the code at eye-level helps a developer to quickly apply ideas to in-progress features. These frameworks, such as GitHub’s Bootstrap and Zurb’s Foundation, will get you started quickly in laying out your screens. However, you should remove unused pieces of the framework from your codebase to tighten up your product’s performance and initial loads. Also, be sure to extend the visual themes of these frameworks to ensure your design stands out.
Hybrid tools take features from both design and development tools. You’re able to layout modules and content visually and turn those layouts and theming into code, either for publishing or further integration into your application. Early generation tools, like Macromedia/Adobe Dreamweaver, weren’t always great and left a lot of cruft in the code. Newer applications have taken note, and tools like Macaw give you greater control over your exported code. Hybrids are centered around responsive design, and you can quickly prepare for different devices while using the same assets. Many of these tools, such as Webflow, are even based in the browser and can be turned on for public-facing testing.
It goes without saying, but all front-end development is opinionated. Highly. We’ve tried many of the development tools listed in the presentation, but none seemed to work perfectly. You’ll have to find what best works for you. After many projects, Wellfire has built up its own pattern library (opinionated of course) of things that have worked for us, so we stick to development-centric tools as they have the most control over code and final output. Your design and development culture will dictate what path you take.
Edit: Adobe has just released a new application, Adobe Comp CC. At first glance, this looks great, especially if you are in the Adobe Creative Cloud ecosystem (Cobey Potter, 03/30/2015).
User testing is an integral stage in your project cycles. You’re building this to be used, so it’s important to get it in front of people to kick the tires. Using tools for the recording and playback of your testers using your app and heatmaps to show where their attention is most focused will help you to determine if your product is hitting all the right buttons (yep, pun intended). While dedicated user testing is generally a great idea, select/personal user testing works just as well. Have your clients or coworkers (if you have them), test your application and give feedback. Oftentimes, your client group will have a vested interest in the product’s success or may be the ones that will be using it day in and out, so will be most likely to thoroughly test the product.
Another great resource is your family and friends. How often have they asked for your help with a computer problem “just because you know computers?” Probably pretty often. Now it’s time to call in that favor they owe you. One of the best tests is the mom or dad test; if they can use your product successfully, you’re going to have a winner. Also, don’t worry about whether or not they’ll try and give you a positive review just because you are their loving child. It’s incredibly hard to hide frustration, especially when using a computer.
Don’t get discouraged when you have to go back to the drawing board and change your feature when you find that its not working for your users. This is part and parcel of crafting a user interface, and you may see it happen multiple times until that feature works comfortably for your users and you’re meeting desired metrics. User testing and rehashing of features is built into the UX project flow; make sure it’s a part of any iterative process you do.
In part two, I’ll discuss additional pieces of the user experience that are not readily noticed. Wellfire considers performance, accessibility, and security as integral parts of UX and I’ll explain why we find that they’re important to your UX process and product. Stay tuned.