Alexander Becker provides ideation services, conceptual and technical consulting, as well as design and production services for print and web projects. Alexander Becker is the creative mind behind alter ego Lyrois. »
Let me suggest you tweet this
While creating the interface prototype for a portfolio page, I came across some interesting feedback and observed, through informal user testing, a couple of usability assumptions that seem to be common today.
The details are not the details. They make the design.--Charles Eames
With everybody being spoiled by slick User Interfaces (UI) and the return of gradients and finally working transparencies (through CSS3) most sites are due for the bling.
In the ever expanding universe of touchscreen devices, slide is the new hover.
Of course, a hover effect doesn't make sense on touchscreens, it just doesn't work. What we can do, however, is create hover effects for mouse and trackpad and ignore it on touchscreens. Therefore, no functions beside visual effects can be implemented, e.g. showing information via elaborate tooltips is out of question.
Eye-candy or not, a UI works with and caters to expectations, instilled & refined by the likes of Apple, etc.
Informal research indicates a demand for slick...
A better looking UI is a deeper experienced UI which is a more efficient UI -- which leads to an astonishing and almost counter-intuitive conclusion: Function is derived, in part, from form.
The cleaner the interface, the more code you have in the source.
In interface design, a passion for every pixel is crucial.
The best usability testers are our extremely web-savvy children & our not-so savvy parent's generation. Not to generalize, I know there are exceptions in both camps.
I started and beautified the LYROIS entry page with some CSS3 & a gallery.
This is how you arrive --
A huge mouseover animates the logo and prepares the way for the game with the shapes. The gallery is recognizable as a scrollable through the use of the navigational arrows. Text shadows are delicately used to enhance legibility and contrast and a white-to-transparent gradient creates a visual foundation for the gallery. This is an example of an "adapted" look, not intended to be "trendy", but used to meet visual expectations.
The overlay creates focus and removes distractions --
By clicking on a gallery item, an overlay is made visible, containing not just a bigger image but moreso, a short project description and a link to the project page. I want the overlay to add value & information, mere zooming might be disappointing. The use of a white shadow surrounding the overlay is intended to further push the underlying elements in the background thus visually masking distracting elements. (Note: This is concept work and I am aware of the right arrow and the generic close button.)
The goal is to build an integrated UI though, not just parts. On the other hand, developing in public is always fun & I can roll out what I got, with ongoing feedback. Without thousands of visitors per day, I can afford to.
Starting the page --
The intention is to remove multiple blocks of text, an attempt in visual minimalism, rectangular fields for three functional areas; the navigation × sidebar, the gallery, and the content of the page. The main target of the minimalism is the sidebar, with lots of text and distractions -- we're here for the imagery, right? The 5-item navigation contains the whole traditional sidebar with clear titles. You get to see what you click on, as opposed to sorting out the skimmed fragments. The gallery section is subdued and kind of veiled behind a semi-transparency, again, a feature to remove distractions and visual competition. The background gradient, while picking up the contemporary style, acts as a subtle visual indicator of page-length: The brighter the background, the closer you are to rock-bottom.
The top right mini-gallery is built with all CSS3, no JavaScript, and no image-swapping. The JQTools catch the click and enable the overlay. This gallery is not scrollable, it is made up of 12 items which are simply clipped to the width of the browser window. The reason for this decision: Incorporating the arrows or some navigational element would lead to clutter, also, explaining a non-obvious action -- like using keyboard-arrows -- is the opposite of what we're after here.
A closeup of the accordion tabs --
The tabs are enhanced with CSS3-gradients to create the old button-effect. There are no images here, and I wouldn't have used an image-based gradient -- but doing it this way is fast and flexible and the iPad and other slick touchscreens practically demand gray gradients (What sounds like a rant is none. The gradients are simply beautiful.). The hover state on mouseover flips the gradient. Please note the text-shadow and the way it is flipped as well when hovered.
The opened accordion and a hover state --
Here we got the accordion slid open, showing its contents, under theis pane, by the way, a customized stack of BixBe sales widgets. The content of the page is visible with the tabs open, it wouldn't make for a simpler site with the content hidden by the tabs, this is an example of two levels of content living peacefully side-by-side. No competition here. Note the state of the opened, active tab, which stays in the mouseover state while the pointer is already away and hovering above the gallery, revealing the now fully opaque picture of the second item.
The whole page with overlay active --
As shown in Example 1, the overlay contains a short project description and a link to the project page. Again, the use of the white shadow surrounding the overlay is intended to hide distracting elements. One last word regarding the gray-scale gradients: A gradient is elaborate by itself, the use of color, especially near full-color pictures is most often too much. Eye-candy, taken literally, is a distraction by itself.
See it live at Lyrois.
Used items from the very reliable JQuery Tools --
The skin is made with a bunch of very heavy and somewhat advanced CSS3.
Please note that CSS3 gradients & shadows don't show in Firefox (FF) prior to 3.6 -- at a visitor share of less than 10% I don't hack for Internet Explorer (IE) anymore.
Depending on the browser it either looks beautiful or it degrades gracefully. This means that FF prior to 3.6 and IE get no gradients but solid colors and mostly no shadows. You don't even need pixel-based gradient backgrounds when CSS3 does even that.
CSS3 tutorials and showcases
Optimization
User Interface Design
Myth #3: People Know What They Like
the time it takes to make a decision increases with the number and complexity of choices. And as the decision time increases, the user experience suffers.
