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:

1. An up-front encapsulation of features
2. Hierarchical or interrelational maps or diagrams of the system
3. 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.
4. Full-scale/resolution state screens (when appropriate)
5. An index of all individual implementable graphic resources, along with location coordinates (if necessary) and behavioral documentation.

Or-

1. 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.
2. 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:

1. An area to create and directly edit a collaborative document
2. 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.