Archive for Design
May 7, 2008 at 12:02 am
While walking to and from class the other day, I listened to a podcast of Daniel Burka, digg’s creative director, speaking at Web Directions North back in January. He discussed many of the design choices they’ve made at digg and Pownce, including the sites’ initial layouts and digg’s infamous comments section. One thing that I found particularly interesting was what he said about the digg button.
One of the most powerful things about digg is that you come and you hit a button and the number goes up by one. It’s not a question of you like it or you don’t like it, it’s just kind of if you like it, hit it. That’s really important, I think. And it also makes things more positive because it’s not about disliking things.
Daniel Burka
The idea here is that if you center a user’s interaction with an interface around a positive action, then that user is more likely to come away with a positive experience with that interface. In this way, digg focuses on the act of showing interest in a certain story or object. In this sense, there really is no negative aspect to digging. The bury feature isn’t meant to be an outlet for personal disapproval of a story. It’s meant for stories that aren’t appropriate for the site. If you don’t like a story, just don’t digg it. It’s that simple.
This simplicity has directly led to digg’s popularity. The ease with which users interact with the site opens it up to a wide audience. People may only read 20% of the words on a page on average, but plenty are willing to make a single click to show support for a story on digg.
As a side note, apparently if you bury with a purpose (i.e. specifying a story as innacurate or OK, This is Lame), your bury counts for more. Keep this in mind the next time you see a story that shouldn’t be on the homepage.
Tags: Design, Usability
April 1, 2008 at 12:45 am
fadtastic posted a good article on home pages and initial-load experience. Here’s a taste:
Normally, what you want your home page to do is give is [sic] a balance between showing the user what they expect to see and attracting them to areas of your site they might not have known about but that you want them to be tempted by.
fadtastic: The New Shop Window / Home Page’s That Sell
The metaphor of a website’s home page as a storefront is a great one. Just as a shopper’s split-second glance in a store window helps determine whether they’ll soon part with their money, a user’s initial experience with a page determines its effectiveness, be it in terms of sales, influence, or branding.
The article mentions the importance of keeping the message simple, which I couldn’t agree with more. Present the necessary information in an obvious and intuitive fashion and then get out of the user’s way. The examples of Apple and Skype are very good. Both companies have always excelled at pragmatically delivering marketing dialogue.
Remember The Milk does it pretty well, too. It’s all about clearly presenting your message (what your product does, what your service can offer, what you want people to know) and leaving the fluff out.
I don’t totally agree with the inclusion of eBay as an example, though. It’s much better than it has been in the past, but still much more nervous and unintuitive than Apple or Skype. I’d be interested to see how the site would fair if they went for the Google search-box-and-button approach. That can be saved for another day and post, though.
The fadtastic article’s definitely worth checking out. There’s a bunch of other useful articles at the end of it too, for even further reading.
Tags: Design
March 25, 2008 at 2:44 am
Constraints are a designer’s best friend. They’re signposts, not shackles. In a sense, constraints amount to the solution half-built. It is merely up to us to then realize the other half according to what these signposts indicate is appropriate. Nowhere in this concept does self-expression find any valid foothold.
A List Apart: Articles: On Creativity
While getting caught up on A List Apart, this paragraph by Andy Rutledge stuck out. I’ve always thought this without realizing it.
To many people the word “constraint” carries a negative connotation. Constraints are things like a curfew or a short budget.
But to a designer, or anyone working on a project, constraints can be godsends. They act as limitations innate to the task that narrow your focus and thus decrease the amount of overall work you have to do.
It’s like having to mow a manageable, fenced-in lawn as opposed to a sprawling field.
Tags: Design
March 19, 2008 at 12:43 am
The world of web design is abuzz with talk of jQuery, a snappy Javascript library that lets you, among other things, have sweet-ass animations. In between studying for finals and playing Counter-Strike, I’ve been reading up on how to use it.
Since I don’t “know” Javascript, jQuery is a godsend. It allows you to take advantage of Javascript’s DOM abilities without having to write tons of code. I’m learning Java in school, so jQuery functions are well within my level of understanding.
The Problem
One quibble I have with jQuery is that pages using it often aren’t as accessible as they could be. For example, if you go to Web Designer Wall’s demo page and turn off Javascript, the demos break. In some cases you only lose the flashy animation, but in examples where jQuery allows you to slide previously-hidden content divs into view, the demos become unusable.
This is because the sliding effect is implemented by styling the elements to be hidden with display: none, effectively removing them from the page. When the jQuery function is triggered (generally by a user’s click), the element is toggled to an active state and slid into view.
So when you turn Javascript off, you’re left with the CSS display: none hiding your content.
And so I set out to find a way to implement jQuery’s content-hiding animations while retaining accessibility. In particular, I attempted to create an accessible accordion-style menu, meaning that the menu defaults to showing all content sections when Javascript is disabled.
The Solution
Since the root of the problem is that the display: none in the stylesheet hides the content, all we’d have to do is remove this line of CSS, right?
Wrong! If you do this, then the accordion loads with every section open by default, with Javascript enabled. This isn’t ideal since we’re using the jQuery effect to only show one chunk of content at a time. So, ideally we want a way to only render the display: none when Javascript is enabled.
After a bit of research and a single line of code, I’ve got a fully functional, accessible sliding accordion menu. Within the jQuery API, there’s a set of functions for manipulating a page’s CSS. Using the css() function, I was able to add the display: none to the accordion’s content paragraphs using jQuery instead of CSS:
$(".accordion p").css("display", "none");
Here’s the result:
Click to view demo
Since the paragraphs are styled to be hidden by jQuery, it defaults to display all content when Javascript is disabled. We now have the best of both worlds: the classy sliding jQuery animations and a fully accessible menu. Success!
For more information on jQuery and examples of it in action, check out this article on SitePoint and the second article in Cameron Moll’s 4-part series, The Highly Extensible CSS Interface.
Tags: Demo, Design, Technique
September 8, 2007 at 4:35 pm
After letting it sit in my downloads folder for many months after it was dugg, I finally got around to reading more of Bret Victor’s paper on information software design entitled Magic Ink. This thing is a beast of 73 pages and absolutely packed with well laid out information. That being said, I’ve barely read a quarter of it, so expect more posts referencing it.
One interesting point that Victor presents is the notion that interaction (i.e. navigation through a website or software) is in essence detrimental.
“Unless it is enjoyable or educational in and of itself, interaction is an essentially negative aspect of information software. There is a net positive benefit if it significantly expands the range of questions the user can ask, or improves the ease of locating answers, but there may be other roads to that benefit. Many questions can be answered simply through clever, information-rich graphic design. Interaction should be used judiciously and sparingly, only when the environment and history provide insufficient context to construct an acceptable graphic.”
This idea that navigation is inherently bad reminded me of a design trend among large-scale news websites that I find extremely irritating. You know how a lot of big old-media sites tend to break up articles into way more pages than are necessary? For example, sites that break up semi-long articles into half a dozen pages in order to display one viewport’s worth of text at a time and “Top n ” pages like this one.
I HATE that.
Pages like these are so tedious to navigate through that I usually don’t bother reading them. The amount of time and effort wasted by having to click and load separate pages containing little blurbs of information is much greater than the effort taken to scroll down. It’s time old-media websites realize this and stop frustratingly hand-feeding us content.
Tags: Design, Design Trends, Information
