Posted on 04 / 28 / 10
I have been reading the 52 weeks of UX blog. I highly recommend it to anyone involved in web design in any capacity. I was inspired to write a little about the same concept from a recent post on that blog.
A successful user interface (UI) design enables a satisfactory user experience (UX). The end goal is creating the best UX possible, but the problem is when a designer’s sites are so focused on the finish line that they miss the important steps to get there. There are a number of objective UI principles, and Microsoft and Apple have done more to define these than anyone. However, there are also a lot more subjective UI elements. One of the biggest battles that UI designers face is breaking conformity. There is a lot to be said for familiarity when it comes to UX. If the user recognizes the interface and immediately feel comfortable that they will be able to navigate the system, marginal success is immediately achieved. For example, if you are designing a software application to run on Windows, using Microsoft’s own .Net interface and Microsoft’s design principles clearly makes sense. If the user already has a good experience using Windows, creating an application that works just like Windows should be an easy sell to the end-user.
The Web, however, opens many new doors. It also closes others. It is a clean slate in many ways, from a UI design aspect. Design is about creativity in a confined space. Design is not about taking a blank canvas and opening your creative muse to make boundless results. Design is about meeting constraints, conforming to rules and variables and principles. An artist could create a website that would be a visual masterpiece, a true piece of art. But if a user cannot navigate the site to find the information they need, then the site design is a failure.
Simplicity is an important design element to help designers focus on the important elements and constraints of UI design. There is a quote from Leonardo Da Vinci that state “Simplicity is the ultimate sophistication.” This follows the a common sentiment (probably from a quote, but I don’t know the author) when I was in college for electrical engineering. Engineering is about removing everything until you are left with nothing but the solution. Planning your information architecture to determine the most important content, and how different pieces of information should be connected is the first step. Then creating wireframes. At this point there is no art. There is no designs, or logos, or colors, or images. You must make the most simple elements work before you can determine what artistic elements will enhance the UX. Creating an experience for the user starts with creating a comfortable, functional, organized system. No amount of artistic design can compensate for a frustrated user. The end goal is creating the best user experience, but in order to get there, the elements must be broken down into their most simple components and planned and organized.
Posted on 04 / 21 / 10
No, sorry to disappoint, but this post is not about drinking. Well unless you are buying, then I’ll have a nice hoppy IPA. But anyways, what I really wanted to discuss is the idea of a bottom up design. I think this method of creating a Web site is a really great learning tool. It is a great way to always design Web sites, and especially great practice for a beginner. In my last post about Kitchen sinks (and HTML/CSS) I mentioned the idea of organizing your code in layers. If you think of layers, many people think about layers of cake. Well whatever you think of, it is most likely that it makes sense that you can only create/peel/stack/organize layers in one direction. You can only combine the layers of a cake from the bottom up, and that is how Web design should be done as well!
The Idea is simple, you start with the most basic element of your site, and design piece-by-piece, until you have a complete site. You create the basic elements, then you add more advanced elements, and you keep stacking until you have a complete product. There are a number of benefits to designing this way; accessibility and fall back are especially pertinent. For this process we will assume the content and wire frames/layouts are already created. On paper, we have sketches of the page layouts, and content for each section has been written. Now we just need to figure out the best place to start coding.
The first step in the process is coding out the basic HTML. This means ignoring layout, colors, fonts, etc. and simply code your HTML with a focus on the actual content. An emphasis should be put on tagging everything semantically. When you design your HTML with your layout in mind, you tend to start making HTML tags work for your design, and not necessarily the most semantic. In this step we want nothing but plain text, listing out headers, paragraphs, lists, anchors, labels, forms, etc. There are enough HTML tags to generally keep all your information nicely organized in relevant, semantic tags. Tag attributes are also really important. In addition to tagging an element as an unordered list, you may also need to further detail that this list is for the sidebar of a site. Giving this element an ID of “sidebar” would add more complete semantic markup to the content within. This is a good point to also point out the basic difference between an ID and a class. Both attributes can be added to HTML tags, but they should be used correctly. An ID defines a specific element, such as the content of the sidebar. A class, however, may apply to any number of tags. For example, you might use class=”aligncenter” to center align an element. You could add this tag to any number of elements. Once the HTML is complete, you will have all your content. This is the first step in accessibility, and the first part to validate.
At this point you should validate your HTML using an HTML validation tool. I recommend using the W3C HTML validator since they are the ones who establish Web standards in the first place. Make sure all your HTML is valid and semantic. Now its time to move up a level. In my next post I will talk a little more about CSS, and how to organize the content in a manor that is easy to create and maintain.
Posted on 04 / 17 / 10
What’s the big deal with using tables in HTML? Sometimes it is just easier to make a word bold right in the HTML, isn’t it?. Why does it matter if you use a separate CSS file, versus inline CSS? Why shouldn’t I use tables in HTML? If you, or anyone you know has asked such questions, I hope reading this article will change their minds about the usage of HTML and CSS.
If you haven’t read my previous post about the origins of HTML, I suggest reading that first. It will give you a simple background into what HTML actually is, where it came from, and what it’s purpose it.
So we understand that HTML is used purely to tag groups of text, identifying the content and providing context. But as more and more people began to use the Internet, the browser experience needed better ways to display information in an attractive and organized way. HTML tables and style elements were introduced to allow the creator of a page to give the information a consistent look to each viewer. So as the usage of the Internet expanded, so to, did the capabilities of HTML.
Here is where the kitchen sink analogy comes in. The issue is organization. Imagine you have a kitchen drawer. This draw is 2 feet wide, and holds silverware. You put deviders in so you know that when you have a knife, it goes on the right, a fork in the middle, and a spoon goes on the left. Overtime you start buying more kitchen utensils. You are handy with a saw and a hammer, so you just expand the draw. Now it is three feet wide. Now you can fit all kinds of new utensils in the draw! Now you have a better drawer, with more purposes, right? Well what happens when you have to expand it to 4 feet, and now you have so many things all piled in this one draw, you cannot find what you are looking for.
Now take the alternate case. After you fill your 2 feet draw with knives, forks, and spoons, what if instead of widening your drawer, you installed a new, separate drawer. This drawer is 2 feet wide also, and it has compartments for separate types of utensils. Now you know, if you are looking for a utensil to eat with, it’s the draw on the left, if you are looking for a utensil to cook with, it is the drawer on the right. See how this makes things much easier to find, organize, and expand in the future? Every kitchen I’ve ever been in had more than one drawer, probably for this very reason. Compartmentalization is very important to longterm organization of important and expanding information.
Now imagine a small business, starting their Web site. It starts out with just a handful of pages, and some content describing what they do, and how to contact them. Over time that business grows. Now they want to add a blog, and they have different divisions. They want each departments to have their own pages. They want to add an intranet for employees. Suddenly the site has thousands of pages. Now what if the company needs to update the logo? Or change a color? And has anyone noticed that they don’t use the same font throughout the departmental pages?
These are common problems that can be solved much easier with well organized code. This means separate files for each part of the design. The HTML should be the base, with proper, semantic tagging, as well as good use of ID’s and classes. Well formatted HTML should never need to be updated unless new content is added. Then the CSS can be properly divided into files for typography, layout, etc. The CSS is where each element of the style and layout of the site is formed. It creates a central location to edit style-related information. When the HTML is formatted well, it should be easy to identify the specific content you want to manipulate with CSS.
If you organize data in a table, or use the bold tag, or italics, then those layout/design features cannot be changed without manipulating each HTML document where the problem exists. If you have a CSS file called typography, and you set all paragraphs to use Arial, italics, you can change this across the entire site, from one location. This structure of organized, compartmentalized information allows the content to be controlled, reproduced, and maintained much more efficiently.
Another way to look at the structure is in layers. The bottom layer is the actual content, the plain text. Then you have the HTML markup. The tags first, to identify each section of text. Then the tag attributes, such as classes and ID’s. These further define each group of tags, such as defining the difference between a paragraph on the accounting departments page, versus a paragraph on the sales departments page. Then you have the layer of CSS, which can be compartmentalized into files such as typography and layout. Then interactive content sits above that layer. Adding Flash or JavaScript elements are common examples.
Creating the site in this format, from the bottom layer up, helps to create a more accessible and degradable site. This concept will be discussed further in my next post!
