Are you building the next big web application? Then you want to check out these cool “Coming soon” page designs to inspire your own “We’re launching soon” page.

Coming soon pages are a great place to create hype about your project that’s going to take over the world. Silverback did this a few years ago by creating a then groundbreaking splash page in terms of CSS use (visit the size an resize your window). Other websites merely display screenshots of the application under construction – giving investors, future users, and other stakeholders a sneak peek of what is to come.

Coming soon pages are also a great way to gain the first following. Collect emails and get twitter followers, so that you can keep them updated on the progress of your project and be sure that you’ve got a nice crows going once you finally launch.

Enjoy the Coming Soon screenshot collection!

Is the modal window the Web 2.0 version of the ever so annoying pop up window? It can be! However, if used cleverly it can provide the flow and ease-of-use of desktop applications.

The modal window (or modal box) is a great way to hide things in order to give the user a great sense of overview and clarity of what he can expect from a user interface. Hiding things like contact forms, sign up forms, etc., can help unclutter an interface.

Modal windows can also be used to hide away large versions of screenshots, or even embedded videos. Modal are most used for hiding away contact forms, login forms, sign up forms, alerts and notices, help and tips, and search boxes.

Enjoy the modal window screenshot collection!

Once you start testing your web designs systematically and on a regular basis, it can be hard to find test subjects that still have a fresh mind towards your design.

Exactly this need has been spotted by a group of companies that each tries to deliver online user testing in their old way.

Free online user testing services

• FiveSecondTest is a free tool where you can upload your design as a screenshot and carry a series of different tests out on it.

Online user testing services you need to pay for

• Usertesting.com has real people on their payroll, which you pay to carry out live user tests delivered as a screencast, microphone recorded comments, and a written summary. One user test is $29.
• Loop11 allows you to conduct remote unmoderated user tests: create a task, invite users, and get the data. Much like the UI-patterns survey. Loop11 has decent testemonials and costs $350 – as a flat fee.
• CrazyEgg.com lets track what your users do on your page – mouse movements, clicks, etc. Pricing starts from $9 a month and goes up to $99 a month.
• IntuitionHQ is a screenshot-based testing suite much like the UI-patterns survey. They charge $5 for each test project that goes live.
• Userfly lets you embed a piece of javascript on your site and after that track your users mouse-movements and clicks. They’ve got pricing plans ranging from Free to $200 a month.

Now you don’t have an excuse not to regularly conduct your user tests!

In the quest of becoming a good UI designer, you can come a long way by reading books, attending conferences, formally educating yourself, trying out tutorials, or just experimenting on your own. However, if you want to go into hyper-speed in bettering your UI design skills, the best way to learn is to work with other designers. Find them at your workplace, hire them, or spend time online in the User Experience- or Interaction-Designer world.

For learning on your own, I have collected a list of various resources that will help you on your way to becoming a good designer. However, before you start, choose your specialty: don’t try to learn everything. Choose your desired skills and branch out from there.

Here we go:

Fundamental design concepts

Learn the basic principles: The gestalt laws, Fitt’s law, about affordance, feedback, etc. The book Universal Principles of Design gives a great introduction to these and much more (100 principles total).

Books to read

• The Design of Everyday things by Donald Norman
• Emotional Design: Why We Love (or Hate) Everyday Things by Donald Norman
• Universal Principles of Design by Lidwell, Holden, and Butler
• Don’t Make Me Think by Steve Krug

Sketching

Sketching is great for trying out ideas fast and receive rapid feedback. It provides a great tool for discussing ideas and exploring different possibilities. Paper prototyping is fast, cheap, and effective: much faster than coding a digital prototype.

Before you buy any books on the subject, check out these UI-pattern.com blog posts on the subject: Drawing corners and boxes, Drop Shadow, Use a thick pen, Get your arm off the paper, Constrain yourself.

Books to read

• Sketching User Experiences by Bill Buxton
• Paper prototyping by Carolyn Snyder

Usability testing

Discount testing is cheap and easy. The most common approach is the Thinking aloud approach. It will help you quickly test if other people than yourself understand your abstractions. Sometimes it is enough to just grab anybody you can find, give them some tasks to do, and see how well they perform. This will rid most obvious errors that you did not see yourself.

The more advanced lab-based user testing is a science in itself. It will help you once you have removed the obvious errors from your design and is ready to move into the more psychological and engaging factors of usability.

Books to read

• Don’t Make Me Think by Steve Krug
• Handbook of Usability Testing

User research

One thing is to test whether what you have designed actually works – another thing is getting to the point where you have something to test.

User research is about understanding and engaging in your users. Understanding in what scenarios/situations your users interact with your product, how they interact with your product, and what motivates them to do so.

User research is most often formalized in personas and scenarios, and use-cases.

Books to read

• The Inmates Are Running the Asylum by Alan Cooper (On personas)
• The Persona Lifecycle by John Pruitt and Tamara Adlin
• About face by Cooper, Reinmann, and Cronin
• Observing the User Experience by Mike Kuniavsky

Information architecture

Information architecture is about designing how your design works and how its parts play together. The information architect creates structure and principles to make something work in a clear and consistent way.

Books to read

• Information Architecture for the World Wide Web
• Information Architecture: Blueprints for the Web

Interaction design

Interaction design is about… well designing interactions. It’s about designing the connection between your software interface and how it is to be used by the user.

Books to read

• About face by Cooper,
• Interaction Design: Beyond Human-Computer Interaction by Sharp, Rogers, and Preece

UI pattern libraries

UI pattern libraries showcase recurring solutions that solve common problems. They are a great way to study how others have solved the same problems that you are dealing with yourself – and in a way that has become a standard.

Websites

• UI-patterns.com by Anders Toxboe
• Yahoo! Design Pattern Library by Yahoo!
• Welie by Martijn van Welie
• UI Pattern factory by Janne Lammi
• Designing Web Interfaces

Web design weblogs

There are many out there with great content that will help you learn about both user experience, interaction, business concepts in web design, graphical design, and more. The following list is a very selection of all the great websites out there:

Websites

• Boxes and arrows
• UX mag
• Signal vs noise – company blog of 37signals
• UX matters
• Smashing magazine
• A list apart
• Bokardo by Joshua Porter
• Creating passionate users by Kathy Sierra – it’s dead, but has got so much valuable information

Conferences

There are many out there. Here’s a few:

Conferences to attend

• Information Architecture Summit
• South by Southwest
• Carsonified events – FOWA, FOWD, etc.
• UX London
• Web App Summit
• Web 2.0 Summit
• dConstruct

More?

Please do contribute in the comments with your suggestions.

How do you know if your design is a success? Simply, that it will be better than the old design?

A good design only makes sense if it is measurable. In order to make the success measurable, you need to lay down what metrics you are trying to improve.

Web design is no longer just about making stuff look good, but has undergone a radical change from being just about aesthetics to being a strategic tool to improve business. Successful design is aligned with the business. Successful design metrics are aligned with business metrics.

At Benjamin Media, a lifestyle magazine company with significant accompanying websites, we measure our projects against a series of KPIs. At project start, we decide what metrics are appropriate for measuring its success and lay down what level we should aim for. While the project is active, we can then keep an eye on the metrics and see if we’re on the right path, or if we should adapt another path.

To be able to measure success rates, we’ve set up a system, that continuously collects data about our system and economics. We can then look at how the profile sign-up rate, newsletter recipient sign-up rate, or how much of the budget we’re using on maintenance.

So instead of just making a design that will look better than the old design, you could choose to set the goal of “improving brand recognition”, “decreasing the number of support phone calls”, or “increase the number of job inquires”.

Examples of other design metrics are:

• Pageviews. Websites relying on banner impressions would love to increase this metric.
• Unique users. Websites promising a broad share of market reach would like to increase this metric.
• Sign-up. Number of new sign-ups.
• First-time use. How many users do actually start using what the sign-up promises.
• Engagement. How many users are engaged over time – beyond one-time use.
• Newsletter sign-up. Newsletters can be a good tool to sell, make users come back, or make money on affiliate marketing.
• Products sold. Product conversion rates are the mother of metrics for many online businesses.
• Money spent. A controversial metric for many designers is to build something with the least money possible.
• Development time. Can we increase the development time compared to past iterations?
• Traffic sources. Do we want to increase the amount of traffic coming in from Facebook, newsletters, referrals, etc.?
• Amount of work. Is it possible to decrease the amount of support calls, or any other form of manual labor that wasn’t fun anyways?

What metrics have you recently designed for?

When you design for the web, what parameters are you designing for? Aesthetics? Reuse? Sign up? Clicks? Reuse? Conversion rate?

The rookie designer

What separates the seasoned and mature designer from the rookie is the end goal. The rookie designer designs for aesthetics as this is what got him interested in the first place. He lurks around CSS galleries to spot new clever ways to design yet unknown to the masses. His end goal is to astonish and make his peers go ‘WOW’.

The main problem with the rookie designer his end goal. He designs for his peers rather than for the end user, and for aesthetics rather than whatever the true goal of the design is. The rookie designer will make something beautiful and aesthetically great, but will at the same time overwhelm, surprise, and confuse the actual end user.

The seasoned and mature designer

The mature designer knows what he is designing: user experience rather than graphics. He also knows that good user experience only makes sense with a target. A good design can be measured, as the end goal has been made clear from the beginning. A mature designer knows what criteria will make his design a success – whether it is sign up, re-use, more clicks/page-views, reuse of design elements, to sell products, or in any other way increase a conversion rate.

The seasoned designer knows his toolbox well. He knows what works for what purpose and what does not. He spends his time on make the experience work instead of making the website “blink”. He is designing the experience so that nothing can go wrong instead of designing what could be cool if it worked. He is sticking to the patterns he has learned over time.

It seems that most industries have their own form of agile development methodologies. Manufacturing has lean manufacturing originally developed by Toyota. I just found out today that construction has something similar: Design-build which is in contrast to the traditional “design-bid-build”.

In the Design-Build construction methodology tasks are completed in overlapping fashion, like beginning construction while still designing the building. The comparison between software development and physical construction has often been used to argue against agile development practices in that “you can’t just add another story on a skyscraper”. Adding another story to a skyscraper might be a little tough, but finishing off the design by reacting on feedback of what has already been built is not too far off.

One of the key concepts of agile development is turning the agile triangle upside down. That means instead of starting off with a fixed set of features in a requirement specification (scope), instead the budget and time is locked. It seems this is also the case with Design-Build:

“Almost 70% of traditional contracts end up over budget, compared to D&B which is only around 25-30% over budget. The overage of a D&B project is generally owner driven, whereas the overage in the more traditional method tends to be a result of the budget disconnect to which many architects and other design professionals are prone.”

- Wikipedia: Design-Build

The topics on this blog tend to go beyond just design and its patterns. It has also covered how to get there and what to do once you’ve arrived. This post is about making presentations: physical presentations of your product, thoughts, or whatever you have in mind. Here is my and other’s collection of presentation tips collected and tested over some time now.

Set the scene: Be on top of the game, the beginning is critical

• Show up early. If there aren’t any technical problems to fix, you can always chat and mingle with the audience.
• What is the problem, who cares, and what is the solution?. Clearly tell your audience right from the beginning.
• Skip the formal presentation. Sure ways to boredom: your reference list, your name, and why you are there. Start off with a bang instead, and they will want to know it later. If you rock, they will even want to know what your name is and have a look on that reference list. Oh.. and please don’t say that you’re glad to be there – unless you’re a superstar, nobody cares.
• Start with a bang. The first 10 seconds are critical. Set the scene – get the attention of the audience. Provoke them, make a joke, or tell a story.
• Communicate what you want to do. Start the presentation by laying out the agenda. If your presentation is about an idea, then present the idea first, then explain it, and at last repeat it. Communicate the agenda! Your audience’s time is precious – they deserve to know if you have 4 slides to go or 40.
• Communicate to several senses. You should be seen, heard, (felt, tasted, and smelled).
• Never apologize. Most people won’t even notice that you’ve slipped, and it just sounds lame.

Keep up the pace

• Avoid sentences. Avoid long sentences – people won’t read them anyways. If you can’t remember your slides, then improvise. Use pictures combined with words or numbers instead – and explain the rest by talking.
• Pause, take a breath, and talk slowly. It’s easy to become so engaged that your tempo rises to an unbearable high. Slow down! Talking fast will worsen your language and pronunciation – testing the concentration of your audience. Take a deep breath when there’s a natural break in your presentation. It will make the tempo more balanced and mental pictures will stand until you begin again.

Engage, relate, and keep it real

• Talk in pictures and use analogies. Create pictures in the minds of your audience that exaggerates the points, but makes it clear. Use mental pictures and analogies to make complex concepts concrete and simple to understand.
• Logos, Pathos, and Ethos. You need it all: Logos (Logic, facts, measurables, or rational arguments), Pathos (Passion, values, gut feeling, or rich pictures), and Ethos (credibility, trustworthiness, or ethical appeal).
• Refutation. Close the presentation by questioning your own stand. Acknowledge that it might not be that easy to get to the target, but that your way is a good start. Finish off with the conclusion – repeat what you’ve said, but keep it short.
• Communicate what you’ve done. End the presentation by explaining what you’ve done. Get back to the agenda.
• Show your enthusiasm!. Don’t hide. Use your body. Use gestures. Walk around. If you aren’t enthusiastic, then why are your doing a presentation on the topic in the first place?

Keep it structured

• Logos before pathos. A common and well-tested way of structuring your presentation is by combining Aristotle’s Appeals. Start by presenting the facts (logos) and then go into being passionate.
• The rule of three. The Rule of three can be a great tool to focus your audience into remembering what you want them to remember. The rule of three works on several levels: use lists of three words whenever you can (“Stop, look, and listen”, “Blood, sweat, and tears”, “Liberté, Égalité, Fraternité”). Also, your audience is most likely to remember only three things from your presentation – plan in advance what these will be. Another way to look at your presentation is that it’s parted into three: the beginning, the middle, and the end. Plan what you want to do in each part.
• Use breadcrumbs. Use icons, colors themes, numbers, etc. in your slideshow to let your users know where you are in the presentation. Present all breadcrumbs in the beginning (or multiple times throughout the presentation), so that they’re easily recognized once you reach them. This helps set the expectations as to whether you’re almost done or only half-way through.

Questions

• Wait for 10 seconds. Count to 10 after asking for questions before you start assuming no one will ask. It seems like an eternity for you, but really is not for the audience.

Practice

• Use a video camera. Practice in front of a video camera. You will be stunned how your body communicates one thing and your words another.
• Make meta-notes. Make notes about what techniques you should use; like making eye contact, pausing, or not to mumble or sip the water.

Sources

¹ Sådan laver du gode præsentationer by Anders Kragelund

² Presentation tips by Edward R. Tufte

³ Thos, Pathos, and Logos

⁴ The rule of three

One of the principles we live by at Benjamin Interactive is to get things out of the computer and up on the wall. The problem with keeping everything in the computer or in electronic form is that nobody else than who’s working on it sees it. You can have loads of information in the wiki, in Basecamp, in email correspondences, in powerpoints, in photoshop files, in excel sheets, or on note paper – but most likely it is only you and the team members involved with the specific content, that will ever see it.

The problem with that is late feedback. Late feedback from all the other people who might have something interesting to say about what you’re working on right now. There are more of these people than you might think: your boss, the sales team, the guy who did a similar project last fall, the project manager, testers, the guys taking over later on in the project, and even random people. When the information continues to live in your computer, in turn, there’s a good chance you’ll end up spending too much time on the wrong solution.

Instead, get it up on the wall! Make it visible! If you’re working on a new design, mock it up on paper instead of spending large amounts of time perfecting it in photoshop. Mockups do not need to to be beautiful to create value: they will provide immediate feedback. If you have a new business idea, write it down in a short sentence that sums it up, and write it on big letters on a large piece of paper – or sketch it up with rich pictures. If you want to communicate progress in a project, then get the user stories up on the wall with a series of note cards and mark them with stickers once each is done.

Sketch it. Draw or write it by hand and put it up on the wall. The result is better and more honest feedback. You will be surprised how little effort is needed to create value. If you aren’t embarrassed about your first sketch, then it’s too pretty! With better and honest feedback, it will be easy to make radically different solutions faster!

It’s a about being proactive vs reactive.

This post was inspired by Anders Kragelund’s 10 tips on user driven development

The UI pattern survey initiative was launched back in April and has slowly been collecting replies ever since. With over four thousand replies, the data collected has considerable momentum.

The purpose of the survey was to crowd-source locating various standard elements on some of the biggest sites out there. The survey had two types of questions: coordinate questions and regular closed-option questions.

Coordinate questions

The following questions were answered by the user being asked to locate a certain element. He or she then pointed the cursor to the element on an iframe and clicked it. The coordinate the user clicked on was recorded and the images below were the result.

All sites were viewed in a 1024×800 dimensioned iframe, which the images below illustrate. Each square on the image equals a 40px X 40px square in the iframe. White color means that nobody clicked on that particular square. Darker color means more clicks – that is more sites have the respective element located in this location.

All replies to questions are summed up per site basis and thrown away if the standard deviation is too big. If the data is valid, it is included in the final results.

Location of account creation (sign up) link or form

Location of login link or form

Location of the search form or link

Location of the global home link

Location of the ‘Get help’ link

Location of the top left corner of the main navigation

Location of the main logo graphics

Closed option questions

The closed option questions was about the look or form of specific elements on each website. The results were:

The login link or form is represented by a…

• Form 20.73% (on 17 sites)
• Text Link 67.07% (on 55 sites)
• Text button 6.10% (on 5 sites)
• Icon 1.22% (on 1 sites)
• Icon button 2.44% (on 2 sites)
• Other 0.00% (on 0 sites)

Can you refine your search by more options than a text-field

• No, there is only a text field and a search button 43.90% (on 36 sites)
• Yes, there is also a drop down that allows me to seach particular parts of the site 18.29% (on 15 sites)
• Yes, I can click on links that leads me to new search pages. 2.44% (on 2 sites)
• Yes, there is an advanced search option. 7.32% (on 6 sites)
• There is no search function on the site. 19.51% (on 16 sites)

If a manage account link exists, what kind of icon is it represented by?

• Writing instrument (pen, pencil, etc.) 2.38% (on 2 sites)
• Folder/file box 1.19% (on 1 sites)
• Check mark 0.00% (on 0 sites)
• Documents 0.00% (on 0 sites)
• Key (representing “Login”) 5.95% (on 5 sites)
• No icon used 66.67% (on 56 sites)

What orientation does the main navigation menu have?

• It’s a horizontally laid out menu 79.52% (on 66 sites)
• It’s a vertically laid out menu 12.05% (on 10 sites)

Is the main navigation tab based?

• Yes 24.39% (on 20 sites)
• No 73.17% (on 60 sites)

Is the colorscheme of the site light or dark?

• Light 83.95% (on 68 sites)
• Dark 16.05% (on 13 sites)

In what section is the sign-up link (not form) placed?

• In the header 71.08% (on 59 sites)
• In a prominent position of the page (not the header) 21.69% (on 18 sites)
• In a not prominent position of the page (not the header) 0.00% (on 0 sites)

How is the sign-up link (not form) titled?

• Start here 3.61% (on 3 sites)
• Other 8.43% (on 7 sites)
• Join 9.64% (on 8 sites)
• Sign up 44.58% (on 37 sites)
• Register 15.66% (on 13 sites)
• Create account 7.23% (on 6 sites)