I’m a big proponent of wireframing as a tool to create better interface designs. We recently released a mobile wireframing toolkit for keynote and powerpoint. The toolkit is not free but it compensates by extra amounts of awesome. More info here.
This is a simple UI critique of a simple feature burried in Google Calendar. Here’s the original:
It’s a relatively simple form. It’s certainly not bad but I think it could be better. Here’s a quick mock up:
Here are the key design points:
A wireframe is an early design that can help you and your team get agreement about what the design should look like and how it should behave. This is similar to how an architect may create a sketch of a building or how a director may create a pencil storyboard of a movie. The purpose of the wireframe isn’t to have a completed product it’s to get high-level agreement on the overall flow.
There are many specialized tools to create wireframes but I believe that many of these actually get in the way of the creative process. The most common problem is that they often render visuals that could be confused for an actual design. This can make people think that they are looking at a specification and they will critique the minor points and word-smith instead of engaging in a discussion about the high-level work-flow.
The other problem with highly specialized tools is that they tend to make the designer behave like a programmer wiring up pages with links and actions. The wireframe is not meant to be a working prototype. It’s meant to be fluid presentation of the high level application structure.
I often wireframe using a pencil, a ruler and a stack of paper:
Paper has the property that you can do anything you want. You don’t need to find a checkbox in a dialog you simply draw a checkbox. You don’t need to wire-up events you just draw what you want it to look like.
The advantage of wireframing in pencil is that the design is obviously not complete and it gives you and others creative freedom to try things out and move things around.
I took the same principal and applied it to a Powerpoint template. All the parts can be easily moved around and customized. The parts have a pencil drawn appearance. Making it easy to edit, customize and add.
It’s not as flexible as paper & pencil but it does make it easier to get executives and developers to edit a wireframe and explore UI concepts and ideas.
This sample includes a number of sample screens showing how various web-page parts and techniques can be mocked up.
If you decide to use a message box use the appropriate buttons and use the appropriate text. The text in this dialog is strange enough without the extra language backflips that the developer added.
Another example from the same program:
Here you’re showing an information box and you have a “Yes” button. It’s just weird. What are you saying yes to? Instead display a progress indicator while data is downloading and add the warning text not to disconnect.
CSS is certainly an improvement on plain old HTML but it’s limitations are staggering and the lack of industry support will continue to hold back designers for many years to come unless we begin to build and design something better.
#content{position:relative;top:32px;left:20%;width:40%;}
They are capturing the style specifics not the design intention. Why 32 pixels? Why 40%? Perhaps the logo is 32px tall? Perhaps the other column is 60% wide? When the logo changes size or placement how will you know what styles to touch? There is a basic concept called parametric design that can be used to specify the parameters of the design. This concept helps embody the design intention as a set of rules that can then be preserved as the design changes. Even a very simple parametric design allows you to preserve design intention rather then hard coding sizes and dimensions.
——–
Archived comments from the original posting
*sigh
And about this:
—
“If you can’t get the site to look exactly the way you want on every single browser then how can you claim that CSS is a good design tool or even a success?”
—
Ups, “to look exactly the way you want”? That is not what a web site is for. What about usability and accesibility? Users should be able to change font size; and they may have big or little screens; or … If you want control what users exactly see, give them a paper-sheet.
I didn’t touch on accessibility but let’s call it a potential #11. People abuse css by turning lists into hover menus, fixing font-sizes so they don’t scale when the font increases and all sorts of other tricks that are totally not-accessible.
In Amazon users can change font size, the design ‘flows’ depending on screen-size, … Well, if you mean that designers want exactly “an usable design”, then I agree with you 
But Amazon is not controlling design to the pixel (and they are doing right!).
Yes, you’re right: CSS may be wrong used against usability. But… it’s powerful, so it’s dangerous (as nuclear power is).
So I won’t say CSS sucks… No more than some tools suck, or some designers suck. CSS simply is not perfect
Every time I read posts such as this there always seems to be more of a “frusteration” than a good understanding and criticizm.
Your proposal to design a tool around the technology is a bit unrealistic. Shall we just convince all browser makers (including the ones that can’t even get CSS right) to just adopt a new technology?
Oh but wait, there is flash – and flash has it’s share of problems as well.
Once you get the hang of CSS it all makes sense and it is not frusterating anymore.
As a junior educator contributing to a college course with over 100 students learning CSS based design (as well as PHP programming), I can assure you that CSS is neither hard nor painful; if 100 students can learn it every year, and produce highly flexible, lightweight, and attractive designs with it, then maybe you just need to go back to school (and I say that without intending to offend you).
I can design something for print production in roughly 1/10th the time it takes to design something for the web using CSS.
The fact that you are blaming me for not understanding is just funny. Your own portfolio proves my point:
html { font-size:100.01%; }
As a designer you shouldn’t have to fight the CSS and the browser to get what you want.
html { font-size:100.01%; }
wouldn’t be necessary if it wasn’t for IE 6 being so common, but who do you blame that on? The W3C CSS group, or Microsoft? Mind you, it’s a bug in Microsoft’s software. Maybe that will help you shift the blame in the right direction.
You said: “I can design something for print production in roughly 1/10th the time it takes to design something for the web using CSS.” Will your print design scale to the user’s window size? Will it allow the information to be used by multiple user agents (machines as well as humans, including humans who access the web in alternative ways rather than just visually)? Will it offer multiple styles? Will it be easy to modify in the future?
Or are we comparing apples and oranges?
The truth here is you don’t understand the web. You understand print design, and client side software, and even browsers, but that doesn’t give you any knowledge of how the web works. I still challenge you to really learn the medium, the technology, the research and the philosophy behind modern web design practices and why things work the way they do. If you did, you would understand why “problems” like cascading are actually features, and why this new way of looking at websites is a step ahead, not behind. Until then, you are entitled to your opinions, but you have no credibility to back them up.
Counter all 10 of my points if you want. Explain how a markup centric
language is better for design. Explain why consistency is not a problem. Explain why cascading is a good thing. Explain how things like CSS hover menus are a good for accessibility.
Go ahead and convince me. I’ll try to keep an open mind.
I believe CSS limits the creativity of designers by imposing technological constraints on visual designs. This may be because I come from a print background but that doesn’t change the fact that I still feel limited.
While CSS can be incrementally improved I personally think it’s important to think about how to make large improvements rather then incremental ones.
Also, it is very easy to make your website look the same in all browsers.
Of course, IE is and always will be the exception. While it is consistantly behind the other major browsers, support is slowly improving.
The point of the internet has evolved to be a source of information and entertainment that is widely available to everyone, everywhere – be it on a cell phone, by a visually impaired person with a braille keyboard, or your average citizen.
The internet isn’t a newspaper. You don’t have absolute control over what your viewers see. You seem to miss the point that the fact your viewers ultimately have control is the benefit of the internet – it’s customizable by individuals to meet their needs. If they need the font size larger, if they need to lower or raise the contrast, or they can’t see and they can have a browser speak to them.
CSS isn’t the be-all and end-all of design – you’re correct. If you want a design that aligns down to the pixel and has the perfect colours on every monitor/browser/platform, HTML is not your best bet to start with, and NO interactive language with the flexability of HTML could do that anyway.
HTML and CSS are easy to learn, cheap on bandwidth, viewable in every browser made in the last what, 6 years, including PDAs/cellphones…
What is your alternative?
You push the idea that ‘something better’ should be created, either by fixing CSS or replacing it outright. I challenge you… how would YOU create this fictional superior method of describing a complicated design using RAW TEXT?
You see, from a designer /and/ programmer’s perpective, CSS is a very good tradeoff. No, I can’t draw a few boxes, apply some drop-shadows, scale some fonts, and see the results in a web browser. That’s life. Vector graphics for the web has been tried before in many many ways (anyone remember the Xcalibur BBS?) but it’s never taken off because it still requires more processing power than just rendering raw text.
The point is, you’re not going to get an easy-to-use method of creating complex designs. They’re complex, and so the method for creating them is complex. While CSS rendering isn’t predictable across all browsers (NOT the fault of CSS), it does indeed make many things possible that would otherwise never work.
My rule of thumb is “Consistency, Consistency, Consistency” when it comes to a GUI. Neither CSS or anything else gives me an assurance of that. So I do what all developers do and I do whatever works. If CSS works for a project, then I use it. If it doesn’t look like it will, I use tables.
I thought this was a good article, with some valid points.
Most miss the point altogether, like:
Greg I just want to ask you what if I told you that Quark will no longer be supporting style sheets? Would you be ok with that? Even if you were working on a 120 page document? I’d be pissed, just like I would be pissed if they took away CSS.
This is irrelevant. Greg has not talked against the general idea of stylesheets, he talked against the CSS concept and implementation in particular. His points are specific and razor sharp, and could be used in designing a BETTER stylesheet language for the web. Like this point:
CSS captures styles not semantics or design intention. A design intention would be something like: “I want to balance these two columns” or perhaps “This text should line up with the logo image in the first column.” When designers do things like this:
#content{position:relative;top:32px;left:20%;width:40%;}They are capturing the style specifics not the design intention. Why 32 pixels? Why 40%? Perhaps the logo is 32px tall? Perhaps the other column is 60% wide? When the logo changes size or placement how will you know what styles to touch? There is a basic concept called parametric design that can be used to specify the parameters of the design.
Right on!
And since a lot of web pages nowadays are “web apps”, are you “css people” familiar with actual programming for GUIs? If you know GTK, QT, Java or what have you, they all have MULTIPLE layout models. CSS only has one, and a cripled one at that, the box model. A single model cannot solve all needs. (btw, almost all languages offer a table or grid layout manager, without sacrificing “fluidity”).
Some points:
a) The concept of styles is correct. It’s CSS that has it all wrong.
b) Design should be intention based and parametric. Hell, CSS does not even have parameters! If I want 20 design elements in my stylesheet to be 200px (or 20% or anything), I have to repeat myself 20 times over. When I want to change it to 200px it’s 20x times the work actually needed).
c) A lot of stuff should have been built in, in CSS and HTML and easier. Rounded corners? Blow me, just have something like:
#box {curve-top-right: 20px }
or have a way to define such effects in code blocks and share them.
etc…
Oh, you mean like CSS3′s border radius property?
http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius
Web sites I build using CSS positioning for images are a lot more readable and maintainable than those I used to make using table-based layouts.
I’m using the $ show how you could declare a parameter/variable. This is still declarative so it’s not an ideal solution but at least it demonstrates how parameters could allow you to do things that are difficult or impossible to do via traditional cascading.
Or you can learn what cascading in CCS means and how to implement it.
Erm, cascading != parametric.
In the case I describe, for example, who told you that the 200px always refers to the same attribute (like width?). It could 200px of width for this element, 200px padding for the other, et al, used for implementing a consistent grid.
Or I could want a yellow background-color in one item, and a yellow foreground in some text or a yellow border in another. Cascading does not offer a way to define all these cases depending on a single color definition.
—
foljs
HTML, CSS, Javascript and all their evil offshoots are a result of:
* an inadequate and limited initial definition of the “web page” problem domain
* a crude, fatally flawed but simple to use initial technology (HTML)
* which lead to designers and programmers crufting up a mind boggling array of workarounds to fill the gaps (Tables and Spacer gifs)
* which spurred a belated attempt to redefine the underlying technologies by rigid academic edict mainly by non-designers (Cascading Style Sheets, XHTML, Widespread Deprecation)
* which was anyway largely undermined by the piecemeal and incompetent implementation of the new technologies in browsers and development tools (all of them)
* which is now all welded into place by the network effect, endless inert committees and monopolistic self interest. (Welcome to the Great Leap Backwards)
We are stuck with a kludge built on a kludge until we have a disruptive technology.
And Flash wasn’t it.
CSS is, simply, a badly designed layout system. Even the rather simple system in Tk which lays out dialog boxes and windows is better. Tk is a nested-box system, but both “pack” (like CSS “float”) and “grid” (like tables) layouts are available in the same system. This is enough to handle most cases. Which “float” and “clear” are not. Page layout is forced to fall back on absolute positioning far too often.
The clever way to do layout would have been with a constraint system. Each box has four edges and four corners, and it would be possible to bind corners and edges to create any desired relationship between boxes. This is something one could express easily in a click and drag graphical tool. Want three columns the same height? Tie their adjacent bottom corners together.
Want to fill the page? Tie the outside corners to a page edge. Ten minutes to explain to an artist. Advanced use would involve priorities on constraints, so if something had to give in “fluid design” as the page size or type size changed, you could pick what gave first. (This could be extended to allow curved boundaries, even splines, but that might be overdoing it.)
The browser would have to have a constraint engine to resolve all the constraints, but there are known solutions to that problem.
Too many people drank the Kool-Aid on CSS. It’s just not that good a technology.
If CSS had a grid capability, it wouldn’t be so bad. But it doesn’t.
It was about separating format from markup to create data semantics.
Greg you are right on the nail. I wonder how many of these so called “CSS Designers” have the BIG profitable accounts.
Can you make the money with CSS on these sites using CSS, I dare you?
Look at these:
http://www.cosmopolitan.com/
http://www.elle.com/
http://www.nike.com
http://www.adidas.com
http://www.faithhill.com/
http://www.motley.com
http://www.imandd.com/index.html
Go on, make one of these (CNN for example) using CSS no hacks, js, pure w3c css. Publish the markup as a test and let us see that you know your css stuff.
Montoya you are the teacher, or is css only for the graphics blind? Prove Greg wrong, go ahead and make my day.
CSS can not do what the tables and flash can here. Forget semantics, forget standards, come and visit me for a little while in reality land. Bottom line people, hard cold cash it’s what matters.
Montoya get off you high horse and do something about it. Rewrite the standards so is more workable.
Use what works, and if you can separate format from markup with css and if tables have to be used so be it and format them in your css.
Windows XP Service pack 2 includes more than bug fixes. This service pack has a number of new concepts, and UI changes that users should be aware of. Some of the changes are aesthetic and some are functional. With this service pack Microsoft has taken a harder stance on security and although this may go some distance to appease the harsh security critics some of these changes may prevent non-technical users from completing common internet tasks.
The review will cover UI concepts, the good, bad and ugly.
XP security center
The XP security center UI is a launch point user interface. The concept is good… Provide a central place to deal with security information.
Unfortunately the security center falls short. The software only allow you to turn on certain features but falls short of providing a complete solution for novice users.
A simple example is the XP Firewall. Once the software is turned on there is no obvious way from the security center to make adjustments. The one link in the main dialog brings up a help dialog, not firewall UI.
To actually make any changes the user must click on a separate icon labeled:
This opens up a separate dialog that has additional settings to block or allow certain types of internet traffic:
The exceptions tab allows you to add exceptions but this is rather difficult. The most likely way that users will create exceptions through the firewall is using the dialog that comes up when an actual programs tries to connect to the internet:
From my experiments the firewall takes the program name and publisher directly from the executable. This means that a rouge program could easily trick the firewall with a non-legitimate publisher and program name. Since the program does not prevent this type of attack the firewall will mostly be an annoyance to users. Additionally this is likely to prevent many internet enabled games from working correctly since the UI can not be seen when a full screen game is running.
Loosing Control
Microsoft continues to have trouble picking a control panel style and stick with it.
 |
 |
 |
 |
| A top level control panel | Second level control panel, now done inside the control panel framework, follows the same look as the top level (Good) |
Third level control panel pops out in it’s own window using a different look, no menus or address bar, still mostly similar. |
A new second level control panel that links off to security related dialogs has it’s own style. This also opens in it’s own window |
 |
 |
 |
 |
| New Wireless Control Panel has it’s own style. | The add and remove control panel also uses parts of this style but does it’s own thing. |
Internet Firewall Dialog using the traditional dialog with a new blue banner, just because.. |
… and of course the Control panel that’s also a folder. |
All the new control panels have their own visual style. Security center, new wireless UI, firewall dialog.
It should be noted that many of these dialogs have been modified specifically for the release of SP2, they could have been modified to follow the same style.
Wireless UI
Over the last 4 years the use of wireless devices has exploded and it’s fairly easy to find at least one wireless connection when standing on a corner of a most city blocks. So I was excited about the new wireless UI.
Unfortunately it’s a real mess. Pre-SP2 there was one dialog and even though it wasn’t ideal it was a single location to configure wireless settings. In SP2 there is a new dialog and wizard that aim to configure and setup your settings. The new UI is somewhat simpler but because it only does part of the job you still need to deal with the previous UI confusing things even further. In addition the “Wireless Network Setup Wizard” is separate from the “Home Network Wizard” as a user trying to install a wireless network it would be confusing as to what wizard I should use. The new functionality should have been integrated into the pre-existing
interface.
Internet Explorer – Punishing many for the mistakes of a few.
Our poor users want to install a program from a popular site….
The first hurdle is getting the file. The website designer wanted to make this easy by re-directing to the executable but IE prevents this and doesn’t offer an over-ride that I could find. Strike One.
User sees a security dialog. This dialog is fairly clear in the possible actions but would certainly frighten any in-experienced users. Strike two.
After that internet explorer goes a little far once again warning you about the dangers of internet software. Strike three. I should only be warned once. Imagine if other parts of the interface where this pedantic? Are you sure you want to open your email? If you open your email you may read something you don’t want to know, are you sure? Do you really want to
read email?
Explorer
The task area in Windows Xp was designed to promote high level tasks and minimize confusion. All tasks that appear in Windows XP are useful to a large majority of users. In SP2 we’ve added some confusion.
There is now the distinction between a home network and a wireless home network. I mention this in the wireless area and this is almost certainly going to cause problems as many home networks that have wireless are a combination of wired and wireless and it’s not clear that the two have different sets of functionality. With some better planning this should have been one wizard that would walk you through the setup regardless of how your PC is wired.
Secondly there is a new item called “Hide icons for networked UPnP devices.” This is terrible task for several reasons. First off it’s not something that most users need to do since most users don’t know what a UPnP device is. In fact most users don’t have any devices to hide so the task is totally useless. Additionally the task is phrased in programming terms and does not address the real problem, what the user wants is to reduce the clutter in their network folder.
Useless Dialogs
The term “Dialog” is meant to describe it’s purpose. A dialog is supposed to ask a question, take some input and process the results. The following dialog is an example of poor UI design.
There are already mechanisms to tell you if the firewall is on:
Therefore the message box is entirely useless. The dialog could equally be shown like this:
Conclusion
My main gripe about security is that it’s often viewed as just a way to
‘secure your computer.’ Keeping undesirable users out is just half the
problem. Security is useless if the the people who should have access can’t
get to the resources. Well designed security not only keeps intruders
out but it provides mechanisms to let others in.
Typical message box: “Your password is wrong. Ok.”
Better dialog box: “Your password is wrong. Would you like to try
again, request the owner for permissions or cancel?”
Microsoft has made a good push for security but at the cost of the user
experience.
Service pack 2 may make your computer more secure but it is also likely to
cause you annoyance and frustration. Security can be added without
hurting the user experience.
##################
Raizlabs was founded in 1997 by Gregory Raiz, with a vision to enable
people to express their creativity and imagination through innovative
software and products. As a leader in user interface design for websites and
desktop applications Raizlabs continues to provide software and web
solutions worldwide.
Gregory Raiz formerly worked at Microsoft on the design of Windows XP but
was not involvement in the design of Service pack 2. Companies seeking
guidance in user interface design are directed to the services section of
this website.