While many of you are here to learn about using Open Source Content Management Systems- which generally give you a pretty good, standard, accessible and easy to use user interface which provides a user experience that works- some of you like to bend and sometimes break a perfectly good system with your ideas of what a site should or could do.
And for you- I gathered some resources so you can learn the ins and outs of what UI and UX is all about- from other folks of course- because while we understand good UI and UX – we don’t love reinventing the wheel.
What is a UI spec:
- An up-front encapsulation of features
- Hierarchical or interrelational maps or diagrams of the system
- Interaction flow diagrams (with varying degrees of fidelity from wireframes to full screenshots). These would also have a lot of descriptive text and callouts for explaining and directing.
- Full-scale/resolution state screens (when appropriate)
- An index of all individual implementable graphic resources, along with location coordinates (if necessary) and behavioral documentation.
Or-
- A functional specification describes how a product will work entirely from the user’s perspective. It doesn’t care how the thing is implemented. It talks about features. It specifies screens, menus, dialogs, and so on.
- A technical specification describes the internal implementation of the program. It talks about data structures, relational database models, choice of programming languages and tools, algorithms, etc.
Why do we write a spec: http://www.joelonsoftware.com/articles/fog0000000036.html
It would help in the design process to have:
- An area to create and directly edit a collaborative document
- An area to discuss the contents of the documents, be it inline commenting or a discussion section.
Some great reading on the subject:
The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition) (Voices That Matter)
– great overview of the breadth and depth of the concerns of user experience and our process.
Subject To Change: Creating Great Products & Services for an Uncertain World: Adaptive Path on Design
– great summary of our field’s view of the value of design-driven product and service development
Sketching User Experiences: Getting the Design Right and the Right Design (Interactive Technologies)
– the importance of visualizing our ideas throughout the software development lifecycle
Observing the User Experience: A Practitioner’s Guide to User Research
– great methods for your toolkit, like user interviews, contextual inquiry, usability testing, and card sorting.
Design Is How It Works: How the Smartest Companies Turn Products into Icons
– case studies in applying design holistically to companies, products and services
The Design of Business: Why Design Thinking is the Next Competitive Advantage
– highlights how organizations can use design thinking for a competitive advantage;
The Experience Economy, Updated Edition
– this book is over 10 years old but still very current (this link is to an updated edition). It’s about staging experiences that are focused on people.
this list via What a BA should know about the UX profession: Interview with Patrick Quattlebaum.
Our own contributions:
Communicating Design: Developing Web Site Documentation for Design and Planning (2nd Edition) (Voices That Matter)
– by Dan Brown
Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition
– One of our favorite introductions to usability.
And- in the end, why do you do this? To quote Joel Spolsky:
UI is important because it affects the feelings, the emotions, and the mood of your users. If the UI is wrong and the user feels like they can’t control your software, they literally won’t be happy and they’ll blame it on your software. If the UI is smart and things work the way the user expected them to work, they will be cheerful as they manage to accomplish small goals. Hey! I ripped a CD! It just worked! Nice software! Wooooooooooo!
To make people happy, you have to let them feel like they are in control of their environment. To do this, you need to correctly interpret their actions. The interface needs to behave in the way they are expecting it to behave.
Thus, the cardinal axiom of all user interface design:
A user interface is well-designed when the program behaves exactly how the user thought it would. As Hillel said, everything else is commentary. All the other rules of good UI design are just corollaries.
From his post: Controlling your environment makes you happy.
You now enough to be dangerous. Go reinvent the wheel- just make sure they don’t have to read the manual.
The New York Times has an excellent article on why you should use video as part of your online strategy.
Online video is becoming a first stop for many customers. It is akin to what the Web page was a decade ago — something that can give early adopters an edge over competitors. It gives them a channel to talk directly to customers in ways previously accessible only to large companies that could afford TV advertisements.
This guide to using online video focuses on YouTube, which is by far the dominant player with two billion views per day — but many of the principles also apply to the other hosting services, including Vimeo, MetaCafe, Facebook, Viddler, Brightcove and Blip.tv.
A summary of their tips:
- Show your products
- Create a destination- a video channel.
- Use analytics and tools to analyze your video performance.
- Advertise with it- using preroll ads, banner ads etc. on video sites.
- How to or instructional video- we’ve always said utility is a leading reason to post online.
We’d also add that video reviews or comparisons of products are an excellent tool to gain customers. If you sell competing brands- do a product comparison that helps people make a choice.
Be personable- people still buy from people they know. It helps to put a face on your company- from the sales reps to the repair guys, these are the people your customers will be meeting or doing business with- showcase them.
To create video isn’t that difficult or expensive anymore. We’re big fans of the iMovie software that comes free with every Macintosh. For a camera- we really like the Kodak ZI-8 ($100 on Amazon) which has a mic input, removable SDHC memory card (which you’ll need to buy with the camera) and a replaceable battery. It’s High Def- and even has a direct to YouTube setting- although we always think a little editing helps.
We also suggest you always use a tripod- for the best quality compressed video, keep the backgrounds simple and non-moving, use lots of lighting if indoors, and at least superimpose your web address and phone number on the video.
There are no excuses to not use video anymore. Remember, after Google, Youtube is the second leading search engine.
We always look to open source tools to optimize the value for our clients- we recommend PHPlist to send CAN SPAM compliant emails instead of something like Constant Contact, or using VTiger CRM instead of Salesforce. We use WordPress, Drupal or Joomla to build websites instead of proprietary CMS systems.
We’re a huge fan of Firefox- and all the great plugins, like FireFTP instead of using a commercial FTP program- and now, we find that there is a cross platform WYSIWG HTML editor for Mac, PC and Linux:
Kompozer has a lot going for it, foremost of which is the free-as-in-beer price tag. Kompozer sports tabbed editing—WYSIWYG in one tab, raw HTML in the other—on-the-fly editing via the built-in FTP site manager, and a highly customizable interface with easily modified toolbars. Kompozer has a markup cleaner and a W3C call function to validate your HTML against current standards. It’s free, available on Windows, Mac, and Linux machines, and it has a strong focus on standards compliance and clean code.
We’re big fans of Coda from Panic Software as a code editor- FTP app- but, it’s not really WYSIWG. We also love the firebug plugin to help track down properties of a misbehaving website- but, Kompozer is definitely worth a look.