It is obvious to most people that, at heart, I am a programmer. I am not a good artist. My wife wouldn’t trust me to pick colors for our bath room. She wouldn’t even let me pick the tiles! But, obviously, I am qualified to make judgments about UI design .
Deprecations aside, I worked hard to compensate for my innate weaknesses: I spend long hours on the internet. Whenever I see a website, I view the source and then understand how they did each page. I try to even guess what kind of software they used in the backend. I regularly check out standard sites. I took college level courses in history of art. In my misguided youth, I even designed fonts. I am writing al this preamble only so that you don’t think that I am ranting.
Long back (in the internet time, it means just 5 years back), we used to get user interface designers. We expected little from them because we didn’t know much. All we told them was to make it look pretty. What we used to get is always a windows interface tacked on to the web:
Essentially, you have a menu bar, and then the menu bar lets users perform activities on the data in the screen. The menu can be on the side, but that is still the same principle. Even if you have multiple menus, it is somewhat same.
What is the problem with this? Nothing, if you are addressing the same audience. But, most applications on the web are not like windows applications. They are for different purpose, for different audience, to be used in different context. For instance, they may be for casual users who do not know all these menu’s are about. Or, they may be for doing a series of standard steps. Just like how, even in windows, you have different kind of UI’s for specific tasks (like say, a wizard), you do need to adapt to the activity and the users.
If we want something better than this monstrosity, what do we need? Since sky is the limit, let me stipulate the following:
- We are not developing a world class system where UI is the main innovation. We know that the difference between facebook and myspace is say 50(?) billion dollars and better user interface. If you have such great ambitions, what I am going to say may not work for you.
- We also want the best UI that our limited budget is going to buy. Surely, it is the functionality we are selling. At the same time good UI make the functionality actually usable.
- We are building enterprise applications with only limited number of users. We are not building a website for the millions.
You may think it is restrictive – but wait till you see remedy interface. I wish they spent all of $500 on the interface!
What I expect the UI developers to do
With those goals, if I were to design a web applications, this is what I would want my UI people (or UX people) to do:
To be in between users and developers
I want my UI people to know the users well enough to disregard UI requirements and create a cohesive and coherent interface. UI design is not about focus groups and satisfying different users. It is about understanding what users really want to do and provide a consistent way to do it.
Similarly, they should understand enough about developers to see map the requirements to familiar patterns. Most developers don’t develop well, if you ask them to do it from scratch. They can imitate well; they can reconstruct reasonably well. UI developers should be able to map the user requirements to familiar patterns in the developer toolbox.
Adapt Industry best practices
Either we lead or we follow. Looking at the constraints that I laid out earlier, I say [we should follow](http://www.slideshare.net/andrewmaier/affordances-in-modern-web- design) the leaders. There is nothing intuitive about any design (except some – like pulling a loose cord, or pushing a stone – blame it on our nomadic hunting days). Most of the complex paradigms are learnt over years of experience from using the systems.
And, innovation over those complex interactions is somebody else’s job. Your job is merely understanding the right innovation and using them in your system. In fact, I have seen that any innovation fail miserably because of lack of talent, support, or budget. So, stick to what worked outside.
Integrate the standard paradigms
Most enterprise applications are about data entry and queries. Workers add information and managers review information, approve applications, or get reports. There are lot of variations in the usage paradigms: workflow, process flow, content management, user interaction, social networking, CRM, helpdesk, self-service, e-commerce etc.
Most modern applications are a combination of all of these. A good UI person understands the nature of the application to get the UI representation of these standard paradigms and map the user requests to the design. If not, what we get is a bunch of pages, that ignores the connections and neglects the possibilities of achieving a coherent vision. Worse still, it will not leverage the established UI patterns and therefore ends up being too costly.
Manage the costs of technology
I recall an incident that a friend of mine told me. The incident happened in the hype of Java applets age. The client wanted the comments field to support variable width fonts and some limited formatting capabilities. The UI person, who was working on the wireframes put that as a part of the design. Unfortunately, the design was not supported in HTML in those days (no/low css; low adoption of JS). So, the developers were forced to use Java applet. That complicated development, testing, and deployment. When the final ballooning of the cost was shown to be more than $200K, the client was dumbstruck. “Why didn’t you tell me that it was going to cost so much – it was not a big deal!” was his last plaintive cry before being wheeled into emergency room.
So, I want my UI people to know the standard Javascript libraries. I want them to know the what plugins exist, what are the costs of doing different interactions. I want them to know some security repercussions of the designs as well. And, with that understanding I would like them to design the user interactions.
Work with templating systems
I often find in the following difficult situation. I get a bunch of screens (HTML +CSS). I do not know the relationship between the pages. Not the navigation scheme, but the relationships. As a programmer, I am used to seeing pages as a hierarchy. Like, say, the results page is just like any other page except the results are in the middle of the page.
(Repetition is good, if we can identify the hierarchy and differences)
In short, if we are able to create a hierarchy of pages, each child specializing the parent page by adding more element, I can quickly prototype and build a system that can be changed at will. If not, each page will get programmed and changing the look and feel of large number of pages depends on the programmer skill.
Unfortunately, here we get into a snag often. The tools the UI people use do support this kind templating system (Dreamweaver and so on), but they do not or cannot expose that to the developers because the developers use different kinds of templating systems. I cannot offer a universal solution – all I say is, the UI people should be able to work it out with the developers.
What I look for in the UI designers
Now that I specified what I want them to do, I will tell you what I look for in the interview:
Knowledge of CSS
Most UI developers are quite good at this. If we want low cost solution though, your best bet is to go with something standard like using Jquery UI. If we are using Jquery UI, it comes with its own themes. Any average UI person should be able to develop the themes to meet the client requirements. The advantages are many fold: you can use lot of plugins as is. You can reuse developer skills as well. [Here is a simple introduction.]
Knowledge of Javascript
In the modern days, any reasonable UI requires a Javascript person on the team. Even the UI people should be familiar with the standard libraries, what they can do, which are the ones that we decided to go with and how to use them to achieve the interactions we need. For finer customizations, we may need a full-fledged JS developer, but most of the basic ones can be done by UI developers.
Color schemes
I know that this is supposed to be the forte of the UI developers. I have often been disappointed with the UI team’s failure to develop a good color scheme. If you are forced to do it, just look at these two resources: color wheel and kuler.
Icons
A simple good set of icons can [spice up](http://www.smashingmagazine.com/2009/03/03/how-to-use-icons-to-support- content-in-web-design/) the [design](http://spyrestudios.com/20-great- examples-of-icons-in-navigation-design/) and get user attention easily. Here is where we can create a unique branding, play on the color scheme, and provide good visual relief. If the UI designer cannot design the icons, at least he/she can buy them or get them from public domain. Ability to incorporate the icons in the web design for consistency and usability is something I look for in a UI developer.
On the issue of stock images: Most corporate applications get spoilt by usage of stock images. How many times have you seen a bunch of white people in suits, with couple of minorities thrown in to indicate seriousness of the site? I agree that you can create a good ambience and set the tone for the site by the stock photos – but that is rare enough that I lost faith. In any case, if you want good stock images free, you can always go to this site. Summary: Don’t expect too much in the way of stock photos from your UI designer.
Fonts
A few words: CSS; standard set of fonts; good readability; ability to use web fonts. And, of course, use them as a theme for using Jquery UI or some such system. If your UI engineer can do that, that would be good enough.
PS: If you are a developer and think that your designer is producing that is way too difficult to develop for, or not doing a good enough job, you can do a few simple things:
- Use Jquery UI for your design
- For your screen layout, check out the following: http://www.openwebdesign.org/. For instance, I found this http://www.openwebdesign.org/design/3499/multiflex32/ design – a reasonable, if a bit old fashioned one.
- For stock images, check out: http://sxc.hu
- For your icons: There are several open source ones. While I like the ones from the nounproject, they are not in color.
- For your fonts: check out http://www.google.com/webfonts
- For your UI paradigms, you are on your own – you need to understand the user needs and what your application is about!