Archive - Web Design RSS Feed

Results Oriented Design: Images that drive conversion

Blindfolded Came across this post and just felt like shouting “no duh!” Derek Halpern is blogging about the impact images have on conversion rates. After years of having tug of war conversation with traditional marketers that want to slap the DM creative into an email or webpage, this post is going to be a great tool to back up my future recommendations.

When you’re selling a product, what’s the main reason why people will buy your stuff?

Once you know that answer, put that in an image… or a few images, and you’ll notice you’ll help convert visitors into sales.

The end goal has to be clear. If you’re a marketer or business owner, and you aren’t clear onw hat you’re trying to achieve online, you need to stop and do a quick regroup on your direction. Once you know, you can then make design decisions that aling.

Check out the blog post,and make sure to click through to Jacob Nielsen’s research and the post from Jared Spool at User-Interface Engineering. Good examples!

 

Share

Microsoft’s new browser will play nice

Good news on the browser war front. Finaly!

For many web developers, Microsoft’s decision to make IE 8 conform to standards used by other browsers will go a long way toward making the web work better.

Microsoft’s current browser, IE 7, came under fire from some web developers because it handles web page code differently than Mozilla’s Firefox, Apple’s Safari and other browsers. The lack of standards between browsers confounded developers and forced some to create two different versions of the same website.

This should go a long way to make the web user-experience a little better, and reduce the costs of web development.

Share

Amazon.com “remodel” ux of the navigation bar

Read a cool review on Amazon.com’s new remodel of their navigation bar via the [Iai-Members] email. Jay Fienberg points out a nice improvement on the amazon.com logo home page link — a simple idea that anyone can implement on their own website.

Amazon has a new top of the page navigation that has, imo, some nice improvements over what they’ve been using for the past couple years.

As has been typical with most changes in the Amazon UI, only some users get to see this new nav right now. But, Amazon has a “remodel”
overview page with a screenshot:

http://www.amazon.com/gp/events/gno/103-2180317-5339050

If you do see the new nav on regular Amazon pages, be sure to mouse- over the amazon.com logo / home link–I think it’s kinda-neat how they do the highlight state (the logo turns into a button with a faux hyperlink that says “homepage”).

Ironically, I was looking at the site for about 10 minutes before I actually noticed the new top of the page–the last few years have trained me to totally block-out the top of Amazon’s pages (as well as many of the other disorganized / strangely aligned feature zone

If anyone here on the list works at / for Amazon and is responsible for this: congrats! I know Amazon tends to manage its UI / user needs as a collection of autonomous fragments (each under the thumbs of the testing-metrics-bureaucracy), and it’s great to see a more cohesive design and set of changes being pulled together into a more unified communication / experience.

Jay
>
>> as in
>>> Jay Fienberg
>>>> http://jayfienberg.com

Share

Tarquini : Blasting the Myth of the Fold

This was an interesting article for me as I come from a Journalism background. This article is a must read if you are involved in web layout design. It deals with the classic battle to place all the “good stuff” above the fold, which usually results in a crammed and cluttered layout.

Stop worrying about the fold. Don’t throw your best practices out the window, but stop cramming stuff above a certain pixel point. You’re not helping anyone. Open up your designs and give your users some visual breathing room. If your content is compelling enough your users will read it to the end.

Advertisers currently want their ads above the fold, and it will be a while before that tide turns. But it’s very clear that the rest of the page can be just as valuable – perhaps more valuable – to contextual advertising. Personally, I’d want my ad to be right at the bottom of the TMZ page, forget the top.

The biggest lesson to be learned here is that if you use visual cues (such as cut-off images and text) and compelling content, users will scroll to see all of it. The next great frontier in web page design has to be bottom of the page. You’ve done your job and the user scrolled all the way to the bottom of the page because they were so engaged with your content. Now what? Is a footer really all we can offer them? If we know we’ve got them there, why not give them something to do next? Something contextual, a natural next step in your site, or something with which to interact (such as a poll) would be welcome and, most importantly, used.

Tarquini makes an interesting comment in her own comment section thats important: content is still king.

Milissa Tarquini
65 Reputation points
Posted 2007/07/24 @ 09:02AM with +0 votes

Chris – you’ve got it right. The content is the key. If it’s good, users will follow it – and I think they will follow it even if they haven’t been to the site before. The design of the page is important of course, and great design can support that great content. But if the content isn’t good, well, then I certainly hope users aren’t scrolling to see more of it… ;)

Read the whole thing.

Update: Jacque at Silas Notes commented on Tarquini’s article and affirmed the importance of content to get users to scroll below the fold.

The key to successful web layout is therefore not to cram your content above the fold, but to write compelling content that will entice the user to want to scroll to read more.

Share

Fresh, Elegant and Clean WordPress Themes

If you are looking into getting your own WordPress blog, check out Smashing Magazine’s list of fresh, clean wordpress themes. They are a great resource for graphics, icons, and design ideas.

We like to observe the Web. We like to present fresh ideas, creative solutions and interesting approaches. We like to share them with our readers, making both our personal work and the work of fellows developers easier. Observing creative works of talented designers, you can improve your skills and learn new techniques. However, to do that, you need to keep an eye on fresh and inspiring starting points.

That they do!

Share

Web Development and Usability: Sweating the small stuff

Interesting blog post over at Silas Notes. Blogger Rhea quotes Jakob Nielsen, who said:

“Of course, it’s important to get the big things right, or you won’t have any users. But getting the small things right enhances usability and fosters user comfort.”

I’ll ad to that. From personal experience, there are a few other important things to consider when evaluating how much attention to put to the small things. First, what a user considers a small thing versus a big thing is very subjective. You might think its no big deal, and the user might think its a major mistake. Consider what Facebook developers thought was a cool new feature–small stuff for a cutting edge development team.

The problem was a new option called News Feed, which creates regular reports about the activity within a network or group of friends. It may have seemed like a good idea at the time, but it set off a revolt in the Facebook community. Users felt that their personal information was being broadcast all over the Web without their permission. Never mind that they had posted it all publicly themselves. Or that it went only to people who were friends or already in their networks. Facebook is a fast-moving, throw-it-up-and-see-if-it-works sort of place that typically adds a feature, watches how people use it, and, based on feedback, adds things such as extra privacy controls. But this time, Zuckerberg and his crew had made a mistake by not putting privacy features in place first.

Taking advantage of another new feature, which allowed individuals to start their own issue-oriented “global groups,” disgruntled users set up a group they called Students Against Facebook News Feed (Official Petition to Facebook). Ironically, the News Feed service itself then spread the campaign (“Your friend has just joined this group!”). In less than 48 hours, 700,000 people had joined the protest, and the blogosphere declared it the end of Facebook.

The story didn’t end that way, and Facebook seems to have recovered just fine, but it illustrates in today’s wired world how quickly a small mistake can turn into a huge mistake.

My second insight is that it seems that when engineers start getting careless because they are trying to “not let the perfect be the enemy of the good” little bugs start slipping through. So, its always healthy to make developers pay attention to small stuff. It keeps them on their toes, and alert to the details, and potentially prevents major problems from occurring later in the development process — the cause of embarrassing delays.

Of course, my guess is that Rhea was referring to interface design and usability. But I have to totally agree with Jakob: “…getting the small things right enhances usability and fosters user comfort.” This is also true in the area of functionality development. Design the tools right from the start, beta test it to see how human’s respond to the page flow, navigation, validation and site feedback, and then be willing to go back and tweak things to make sure its right. It makes a difference, even if your users don’t can’t always pin-point it.

P.S. I think breadcrumbs are cool too. You can read the full article on breadcrumb navigation from Jakob Nielsen’s website right here.

UPDATE: I went over to Jakob’s site after posting the above comments, and read his article titled “Does User Annoyance Matter?” He says something that is key to understand about the “small stuff” that comes up in web development, “Annoyances matter, because they compound.”

If the offending state-field drop-down were a site’s only usability violation, I’d happily award the site a gold star for great design. But sites invariably have a multitude of other annoyances, each of which delays users, causes small errors, or results in other unpleasant experiences.

A site that has many user-experience annoyances:

* appears sloppy and unprofessional,
* demands more user time to complete tasks than competing sites that are less annoying, and
* feels somewhat jarring and unpleasant to use, because each annoyance disrupts the user’s flow.

Even if no single annoyance stops users in their tracks or makes them leave the site, the combined negative impact of the annoyances will make users feel less satisfied. Next time they have business to conduct, users are more likely to go to other sites that make them feel better.

Share

Logo Design just for fun

I have been experimenting with what is being called “web 2.0″ design. I’m not really a graphic designer by trade, but being a web-guru requires a keen eye for design, usability, and branding.

This one I did for a logo contest being run by Smashing Magazine. It doesn’t seem like my entry got to far, but to be fair, its perhaps not very original.

Smashing Magazine Contest Entry Logo

This one is a blog header, including a logo, for a financial and lifestyle radio show.

Amato Money Report Logo Idea

Got to have fun sometimes…keep the creative engine lubricated and running smooth.

Update: I almost forgot…click here to see what other entries for the Smashing Magazine contest looked like.

Share

Web Development Process Advice

It amazes me to see how many people out there call themselves web-experts. It is amazing to see business managers or owners who think that just because they can buy a template, or pay someone for services, they are getting a “professional” website.

The truth of the matter is that the web has made it easier for anyone to use web technologies. But this doesn’t mean that anyone understand how to do it right. I was researching for what others have written about site development process, and found a valuable resource for small-business or small non-profit organizations who might be considering a web development project. This is valuable regardless if you have in-house development team, or if you are looking to outsource.

The Web Style Guide starts with this:

In the long run men hit only what they aim at.

— Henry David Thoreau

THE FIRST STEP in designing any Web site is to define your goals.Without a clearly stated mission and objectives the project will drift,bog down, or continue past an appropriate endpoint. Careful planning and a clear purpose are the keys to success in building Web sites,particularly when you are working as part of a development team.

A lot of it only applies to small-to-medium site projects, and wouldn’t be applicable to large user-driven or to database or dynamic sites. Things like page counts are irrelevant when there aren’t really “pages” to count — its all according to parameters or variables. But, there’s still a lot in there.

Here is the one section I was looking for, and the one area where I think most companies flounder with.

Information architecture

At this stage you need to detail the content and organization of the Web site. The team should inventory all existing content, describe what new content is required, and define the organizational structure of the site. Once a content architecture has been sketched out, you should build small prototypes of parts of the site to test what it feels like to move around within the design. Site prototypes are useful for two reasons. First, they are the best way to test site navigation and develop the user interface. The prototypes should incorporate enough pages to assess accurately what it’s like to move from menus to content pages. Second, creating a prototype allows the graphic designers to develop relations between how the site looks and how the navigation interface supports the information design. The key to good prototyping is flexibility early on: the site prototypes should not be so complex or elaborate that the team becomes too invested in one design at the expense of exploring better alternatives.

Typical results or contract deliverables at the end of this stage could include:

  • Detailed site design specification
  • Detailed description of site content
  • Site maps, thumbnails, outlines, table of contents
  • Detailed technical support specification
  • Browser technology supported
  • Connection speed supported
  • Web server and server resources
  • Proposals to create programming or technology to support specific features of the site
  • A schedule for implementing the site design and construction
  • One or more site prototypes of multiple pages
  • Multiple graphic design and interface design sketches or roughs

To summarize, have a plan, and make sure someone is in control. Actually, make sure whoever is in control knows a little something about everything — someone who understands enough about engineers’ code, database queries, HTML & CSS, design and usability to be able to talk the language and bridge the gaps. You need a project interpreter — someone who can collect the business requirements from a marketing executive, write up a technical requirements documentation, tell IT to stop showing off with their techno-speak, and explain to the marketing people what server log file is all about.

Otherwise, you are going to waste a lot of time and money.

technorati tags:, , , , , ,

Share

Is there such thing as Web 2.0 Design?

I read that in a blog today — web 2.0 site design. I supposed thats a way to identify the trend in web graphic design for glassy looking, shiny designs.

Well, my academic background is not in graphic design, but as part of my own research in web user interface design and usability, I have developed some graphic design skills. I created a banner for my employer today I thought I would show off. Its a banner ad for the launch of a new Presidential election related book. I thought it came out nice.

I actually created two versions. I liked the second one, but the boss went for the first one. What do you think? Put in your vote in the comments and any feedback. Click on each one to see it at full size.







If the book sounds interesting, you can get your copy on Monday I believe.

technorati tags:, , , , , ,

Share