400 Bad request

Inspired by 37 Signals loading bar (pictured above) and making good use of Chris Coyier’s tutorial on CSS3 Progress Bars I set to work designing a bar in Photoshop and then replicating it in CSS3.

View demo here

CSS and Markup

Here is the source code if you want to try it yourself.

<style>
/* 
Set the container for the bar
*/
.bar {
	height:20px;
	width:200px;
	padding:10px;
	margin:200px auto 0;
	background-color:rgba(0,0,0,.1);
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	-ms-border-radius:25px;
	border-radius:20px;
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,.03),inset 0 1px 0 rgba(0,0,0,.1);
	-moz-box-shadow:0 1px 0 rgba(255,255,255,.03),inset 0 1px 0 rgba(0,0,0,.1);
	-ms-box-shadow:0 1px 0 rgba(255,255,255,.03),inset 0 1px 0 rgba(0,0,0,.1);
	box-shadow:0 1px 0 rgba(255,255,255,.03),inset 0 1px 0 rgba(0,0,0,.1);
}

/* 
This is the actual bar with stripes
*/	
.bar span {
	display:inline-block;
	height:100%;
	width:100%;
	border:1px solid #ff9a1a;
	border-bottom-color:#ff6201;
	background-color:#d3d3d3;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-ms-border-radius:20px;
	border-radius:20px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	background-image:
		-webkit-linear-gradient(
		-45deg,
		rgba(255, 154, 26, 1) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 154, 26, 1) 50%,
		rgba(255, 154, 26, 1) 75%,
		transparent 75%,
		transparent
	);
	background-image:
		-moz-linear-gradient(
		-45deg,
		rgba(255, 154, 26, 1) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 154, 26, 1) 50%,
		rgba(255, 154, 26, 1) 75%,
		transparent 75%,
		transparent
	);
	background-image:
		-ms-linear-gradient(
		-45deg,
		rgba(255, 154, 26, 1) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 154, 26, 1) 50%,
		rgba(255, 154, 26, 1) 75%,
		transparent 75%,
		transparent
	);
	background-image:
		linear-gradient(
		-45deg,
		rgba(255, 154, 26, 1) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 154, 26, 1) 50%,
		rgba(255, 154, 26, 1) 75%,
		transparent 75%,
		transparent
	);
	-webkit-background-size:50px 50px;
	-moz-background-size:50px 50px;
	-ms-background-size:50px 50px;
	background-size:50px 50px;
	-webkit-animation:move 2s linear infinite;
	-moz-animation:move 2s linear infinite;
	-ms-animation:move 2s linear infinite;
	animation:move 2s linear infinite;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-ms-border-radius:20px;
	border-radius:20px;
	overflow: hidden;
	-webkit-box-shadow:inset 0 10px 0 rgba(255,255,255,.2);
	-moz-box-shadow:inset 0 10px 0 rgba(255,255,255,.2);
	-ms-box-shadow:inset 0 10px 0 rgba(255,255,255,.2);
	box-shadow:inset 0 10px 0 rgba(255,255,255,.2);
}

/*
Animate the stripes
*/	
@-webkit-keyframes move{
  0% {
  	background-position: 0 0;
  }
  100% {
  	background-position: 50px 50px;
  }
}	
@-moz-keyframes move{
  0% {
  	background-position: 0 0;
  }
  100% {
  	background-position: 50px 50px;
  }
}	
@-ms-keyframes move{
  0% {
  	background-position: 0 0;
  }
  100% {
  	background-position: 50px 50px;
  }
}	
@keyframes move{
  0% {
  	background-position: 0 0;
  }
  100% {
  	background-position: 50px 50px;
  }
}	
</style>

<!-- Start of loading bar -->
<div class="bar">
	<span></span>
</div>
<!-- End of loading bar -->

View demo here

If you like it please give it some love on Dribbble.

How do you track and find out what issues users are having?

Here are some of the methods I’ve use to get user feedback.

1. Talk to customers

Should be obvious but amazing how many companies fail to get out of the building and go visit customers. They’ll tell you things you never thought of and just watching them use your product will give you valuable insights into what’s important and what needs improved.

Run user tests and have them complete certain tasks. Offer gift vouchers in return for their time. If you can’t get to them, use Skype or GotoMeeting to chat remotely.

Steve Krug’s book “Rocket Surgery Made Easy” is a great reference book for running your own user tests.

Silverback is a very good app for conducting user tests. It records the screen, audio and clicks so you can watch back the test or share it with your team.

2. Talk to customer support

If your product or company has customer support, which may be a team or even one person, this is a great source of feedback on what issues users are having.

Use tools like Desk, Zendesk or Olark to help gather and manage support contacts.

3. Send out surveys

If you have a database of user email addresses, either from a newsletter sign up or from users signing up to use your application, leverage this to send out a survey asking for their feedback.

Make sure it’s short enough that users will actually take the time to complete it. The shorter it is the more likely the completion rate. And offer and incentive like a prize for one lucky winner, or even a limited time free upgrade in return for their time.

Use a tool like Wufoo to put together surveys and generate reports.

4. In-page feedback

There are a handful of tools that enable you to drop a bit of javascript on a page and ask for feedback. You can ask questions like “Was his helpful?” or “How can we make this better?”.

UserVoice lets users submit feedback and vote on other feedback items. This helps you place importance on the feedback items based on the amount of votes they have.

KISSinsights lets you place a micro survey on any URL so you can get specific feedback about the page the user is on.

Intercom is a light weight CRM tool that helps you build relationships with your users. You can broadcast messages to all your users, groups of users or direct messages to individual users.

5. Unobtrusive feedback with tracking scripts

All the techniques above involve additional interaction from the user, but of course you can learn a lot simply by observing how users naturally use your application.

Google Analytics is the obvious tool. Not only does it tell you what pages are most popular but it will give you an idea of user flow and what pages the user clicks through to next.

Crazy Egg is a heatmap tool that shows you what areas of the screen your users are clicking or looking at.

Userfly will record a user session so you can playback a video of it later and watch how the user navigates your application, what they click on and what they enter into input fields.

MixPanel records actions and page views, allowing for a deeper analysis of what users are clicking and funnel analysis.

Conclusion

If you’re not constantly getting user feedback you’re doing it wrong. There is always room for improvement so figure out which method of getting feedback works best for you. Ideally it’s a combination of all the above.

This isn’t an exhaustive list. What other methods are you using to get user feedback?

Most buzzed about apps and startups

Without a doubt Highlight was the most talked about app, both in the lead up to and at the event.

It notifies you when someone interesting is nearby based on your interests and friends in common.

Mashable has a good leaderboard of hyped up startups.

Notes from talks and panels

It’s hard to get a grasp of all the talks. There’s something like 40 talks all happening at once (somewhere in the region of 1,000 total I’m guessing) so you have to pick and choose, which is a risk as you might end up in something that isn’t what you thought or you’ve heard before.

Some of the more notable talks I attended:

Chris Risdon, Adaptive Path, Applying Behaviour Design

Every design decision we make influences the user.

Context is a huge contributor. Think of charitable donations. People are more likely to donate at the counter when they swipe their card, as opposed to you handing them a flier and them going away to do it later. Why? Because it’s easy.

Interesting visual graph with motivation against ability.

David Hogue, Fluid Inc, The Complexity Curve: How to Design for Simplicity

For a product to succeed there are 3 things that must match:

1. Mental model, what user expects to do
2. Conceptual model, what website asks you to do
3. System model, what happens behind the scenes

You can remove complexity from conceptual by hiding it in system e.g. collect the user’s location.

Complexity grows as you get more involved in a project and more people voice their opinion:

• “By the way…”
• “Wouldn’t it be cool if…”
• “Looks good but lets add…”

Scope increases or you try to add stuff you’ve seen elsewhere.

How things get complex:

1. Don’t listen to initial feedback
2. By disconnecting action from outcome
3. Trying to design your product to be everything to everyone
4. Too many “nice to haves”
5. Copying other solutions
6. Designing to your limitations (rather than ideal)
7. Focusing too much on latest trends
8. Designing for yourself
9. By accepting assumptions
10. Not collecting data before you start

Jared Spool, UI Engineering, The Secret Lives of Links

Links use the scent of information to get us what we want.

Walgreens homepage, 4% of it is taken up by what the user wants, 96% is what marketing wants. This violates Fitts’s law. The bigger and closer the easier a target is to hit.

Link copy needs to communicate what users will get when they click.

The back button is the button of doom. Once user clicks back, you’ve lost them and there’s little chance of them progressing further. It’s a predictor of failure.

Three useless phrases:

1. Click here
2. Learn more
3. Click here to learn more

Frog, Prototype vs. Sim: Validating Software & UX Design

User research is often filled with BS, lies, wish lists, advice and complaints.

Use prototypes to validate thinking and ideas.

Make sure development team knows it’s a prototype, that it’s fake and the end result is an artefact (not for production).

Designers have the tools to validate any idea these days.

Mark Channon, Author, How to Remember Anything: A Teach Yourself Guide

Break things down into key images to help visualise your memory.

Look around a room and apply visuals to different objects. This acts as a chain of cue cards.

To remember names, look for something interesting about them, listen to their name, apply an image in your head to that name and repeat their name back to them.

Mark Gilbreath, LiquidSpace, Work When Startup Culture Hits Mainstream

70% of the work day desks are empty. Why?

People get work done outside the office, people expect to work where they want to work and technology enables this.

Be economically efficient – spend money on people, not physical assets or buildings.

Let people work outside the office and encourage them to work in co-working environments to maintain that startup culture.

Companies like AOL now have incubators in-house as they try bring that startup culture into the company.

Ogilvy Notes

If you’d like to get a quick snapshot view of more of the talks, Ogilvy Notes have some “>amazing visuals.

Other things of interest

It was good to see the Northern Ireland crew out again. They had some companies showcasing at both the UKTI Showcase and the SXSW Trade Show.

Check out the NI companies and startups that were attending.

The Trade Show was interesting. There’s a mix of well established companies and new companies handing out all sorts of schwag and dressed in various costumes.

As usual there were a lot of parties. Too many. Official and unofficial, hosted by the likes of Mashable, Zappos, GroupMe, Frog, Media Temple. Notable performers were Jay-Z and Kasabian.

There was also a Dribbble meetup organised by the chaps at Paravel. Great to meet up with other designers and hear what they’re working on.

Conclusion

If you haven’t been to SXSW before, go next year. It’s awesome.

As a freelancer the most prototyping I ever did was on paper, and it was usually for the benefit of me. What I’d end up with was a well designed UI, but that hadn’t been tested.

Then I joined Kareo and started putting together interactive prototypes. As part of our development cycle we design and iterate on prototypes on a daily basis.

Benefits of prototyping

Experience the full flow

Instead of thinking about the design as individual screens, you get a better idea of the full experience and flow including pages or states you might otherwise overlook.

Get early feedback

Put it in front of users and start testing for early feedback.

Better than specs

Nobody wants to read through a 20-page spec document. By prototyping you can pass the prototype around developers and executives instead.

Low or high fidelity

I typically start off fairly low, doing just a rough prototype to help flush out some requirements and ideas. Then gradually move onto higher fidelity, incorporating validation, graphics etc. The more tests and iterations the more detailed the prototype gets.

Less time and resources spent

Before the engineering team start work, you’re able to experiment and go through many rounds of testing. Of course you can continue to iterate during and after development, but the aim is to make sure as little time is wasted as possible while getting the best possible outcome.

Collaboration with team members

It’s easier to show team members something that is interactive than to try and tell them about it.

Rapid and quick iterations

As it’s a prototype you don’t have to worry about clean markup or pixel perfection at this stage.

Conclusion

Before you start any project or feature, put together a prototype. It costs a lot less and you can learn a lot by putting something clickable together.

Axure is my tool of choice at the minute but there are a number of great prototyping tools available.

It’s not going to change the world, but it will tell you who you love on Twitter.

It’s a light humoured Rails app that uses the Twitter API to look up your profile and calculate who you “love”. Read more about how it works.

It managed to pick up a bit of activity after launching on Friday, and got some viral spread over the weekend with lots of chatter on Twitter. Here’s an early insight into the analytics.

As of writing this over 100,000 people have been “matched”.

It’s no surprise that most celebrities love themselves, but every so often there will be one or two surprises.

Check out Twit Amore and have some fun looking up your friends for Valentine’s Day.

Edit: Steve talks about once taking a calligraphy class, which he also talked about in his Stanford Commencement Address:

“I decided to take a calligraphy class to learn how to [learn calligraphy]. I learned about serif and sans-serif typefaces, about varying the space between different letter combinations, about what makes great typography great. It was beautiful. Historical. Artistically subtle in a way that science can’t capture. And I found it fascinating.

None of this had any hope of any practical application in my life. But 10 years later, when we were designing the first Macintosh computer, it all came back to me. And we designed it all into the Mac. It was the first computer with beautiful typography.

If I had never dropped in on that single course in college, the Mac would never have multiple typefaces or proportionally spaced fonts. And since Windows just copied the Mac, it’s likely that no personal computer would have them.”

Keep learning and experiencing new things. You never know how or when it may make an impact in the future.

Support is one of the most important parts of our service. The objective of the Help Center is to help customers as much as we can up front before they have to contact our support team.

How we approached the project

This was a great team effort utilising various expertise within the company.

• Identified problems with the existing Help Center by talking to customers and support.
• User tests on the existing Help Center.
• Looked at metrics behind the existing Help Center to see what pages users were using and looking for.
• Restructured the sitemap, user flows and information architecture.
• Put together a high fidelity prototype and ran customers through user tests to identify key issues.
• Ran a number of usability tests internally and externally.
• Reworded a lot of the copy and content to make it more readable and user friendly.
• Redesigned the UI with a fresh, modern look and feel.
• Marked up the HTML/CSS from scratch making use of SCSS, responsive design, HTML5 and CSS3.
• Better optimized the pages for search and included Google Site Search.
• Made lots of back end changes to help improve performance and user flows.
• Added more tracking for better metrics on how customers use the help center and what they search for so we can continue to iterate.

You can see the new Help Center in action here.

Old Help Center

New Help Center

In just 3 days it has received over 100,000 views, which is a fantastic accomplishment for any YouTube video, let alone one produced in Northern Ireland.

The video was put together by one of NI’s talented young cinematographers Matt Good (who incidentally happens to be my cousin). Well done to Matt and all Friends’ staff and students involved in the video.

Makes me want to go back to school. Enjoy.

You can view some of Matt’s earlier work here.

I hope that by writing them down there’s more chance of me actually doing them.

Things I learned and put into practice in 2011

• Learned Haml and Sass for a couple of Rails projects
• Started using HTML5 Boilerplate
• Started making websites responsive
• Am now using HTML5 and CSS3 for every web project
• Learned how to deploy web apps with Capistrano
• Redesigned TweetNI
• Redesigned WebDesignire

Books read in 2011

• The Lean Startup
• Undercover UX Design
• Pro CSS for High Traffic Websites
• Inspired: How to Create Products Customers Love
• Prototyping
• Responsive Web Design

New software/apps for 2011

Some of these apps I had used before, but in 2011 I found myself becoming more reliant on them and working them into my daily routine.

• Axure for prototyping
• Evernote for taking notes (and sharing across multiple devices)
• OnePassword for remembering usernames/passwords
• Omnigraffle for wireframing and sitemaps
• Tripit for keeping track of travel plans

Goals for 2011

A look back at the goals I set this time last year.

1. Read more books
Success: I read a good few books.

2. Talk at more events
Fail: There were a few Barcamp and Bizcamp opportunities, but I struggled to find the time to commit to any.

3. Develop an iPhone app
Fail: Purchased “Beginning iPhone 4 Development” but struggled to get past the first chapter. Started looking at Appcelorator instead.

4. More side projects
Fail: Started off the year well by redesigning a couple of older projects, but didn’t get around to working on anything new.

5. Blog more
Success: Blogged more this year than I did last year.

Goals for 2012

1. Be more mobile focused
Kind of broad but comes down to designing/developing for mobile. Whether that’s native apps, html5 apps, responsive websites – who knows.

2. Release an iPhone app
Related to the first goal, I want the experience of developing an app from scratch, submitting it to the app store and seeing it go live.

3. Compete in a triathlon
I don’t own a race bike yet and can’t swim very far, but I figure I might have a go at it.

4. Snowboard
Just something I’ve always wanted to try.

5. Release at least 3 side projects
There are 46 items on my “Someday” list so at least 3 of them should be achievable.

What do you think, decent list?

Specifically, I was talking about the wording of the copy in applications (web, desktop and mobile).

Here are three ways in which copy can be improved:

1. Words need changed

In this case, the word(s) didn’t make sense to the user.

I had made a (wrong) assumption that all users knew what certain abbreviations were when some didn’t. Also in some cases the copy was rushed so it just didn’t read very well.

Solution

Change the wording so it makes sense and is understood by all types of users.

Pay attention to grammar and write full words as opposed to abbreviations if there’s any chance a percentage of users won’t understand it.

2. Words need added

In some cases users would ask “What does this mean?” or “Why do you need this?”. There wasn’t enough information to clarify that.

Solution

Add a word or two to make it abundantly clear what you’re referring to.

Add some microcopy under the input field to help guide the user and help explain why you need this information.

3. Words need removed

My favourite solution, removing words. We tend to waffle, a lot. The more you write the less people will read it.

In one particular example, there is a page with a notification that explains to the user that they have to print and sign additional documents. But because there was so much text within this notification area, they simply weren’t reading it.

Solution

Make copy as short as possible. Always re-read your copy and remove words if you can.

Add tooltips or links to more information for users who may need to read more.

Have you any tips for writing copy?