400 Bad request

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?

After reading Ethan Marcotte’s Responsive Web Design book, I realised that there is a difference between responsive and adaptive web design.

According the Ethan, who also coined the phrase “Responsive Web Design”, there are three components to a responsive design:

1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

Flexible is the keyword

Until recently I had a site that adapted to the user’s device, depending on the available screen width. If it was less than or equal to 480px, the site would adapt and styles would change to suit that user who were more than likely on a mobile device. Anyone else was served the normal 960px width site.

The CSS looked a bit like this:

@media only screen and (max-width: 480px) {
INSERT MOBILE STYLES HERE
}

But there was nothing flexible about this approach. It adapted to one other screen size, it didn’t respond to varying screen sizes.

Target/context = result

Instead of setting widths and type in pixels, which are fixed, set widths and type in percentages or ems.

This will give you a flexible design, and the widths and sizes will automatically respond depending on their relative bounding box.

After reading Ethan’s book I spent little over 1 hour converting my site from adaptive to responsive. Here is the step by step process:

How to make your site fully responsive

1. Flexible typesetting

Change all type sizes to ems.

Assuming you want your base font size to be 16px (context), which is typically the browser default, the body font-size is therefore 100%. All other font sizes are then relative to this font size using ems.

target/context = result

Therefore if we want our H1 to be 72px (target):

72(target) / 16(context) = 4.5(result)

font-size:4.5em/* 72 / 16 */;

2. Flexible grid

Change column widths to percentages (or ems) rather than pixels.

Give your container a max-width. This will be the bounding box for your grid. Everything within the box is then relative to the max width, or the width of the browser (if less than the max width).

1140 CSS Grid is a useful boilerplate with a flexible responsive grid.

3. Flexible images

Give all images a max-width of 100%. This will ensure they don’t ‘break’ your design.

img{max-width:100%};

4. Box-sizing

One issue I’ve always had with fluid grids is making input field widths flush with the grid. You want a textarea to be 100% width of the parent div, but you also want it to have a 2px border and 5px padding. Thanks to box-sizing:border-box we have a solution.

textarea{padding:5px;border:2px solid #ddd;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;

5. Additional hacks

There may be additional hacks like positioning and width issues you have to think about. In my case, the jQuery slider plugin I was using on the homepage needed a fixed width.

Thankfully, Jordan Burke was able to recommend FlexSlider, a fully responsive jQuery slider plugin.

Further reading

• 1140 CSS Grid – A fully responsive CSS boilerplate
• The Goldilocks Approach to Responsive Web Design – Nice article and boilerplate from Front, focused on responsive design from the content out
• MQFramework – A useful responsive CSS framework

I’ve had bank accounts with Alliance and Leicester, Ulster Bank, Bank of Ireland and the online banking experience has never been good.

However, I just checked out Bank of America and compared to the other banks I’ve tried it’s incredible.

Ulster Bank business banking (Bankline)

Lets say I want to view a statement of recent transactions and see what my overall bank balance is. A very common task for online banking.

Click 1: Go to UlsterBank.co.uk and click business banking

Click 2: Click login

Opens a nice new window.

Click 3: Enter a customer ID and a user ID and click continue

Because one ID isn’t enough.

Click 4: Enter requested numbers from your PIN and requested characters from your password and click continue

There are so many IDs and passwords to remember that you have to write them down somewhere.

Click 5: Read the welcome message and click confirm

Click 6: Click account information

Click 7: Click view account balance

Click 8: Click on your account ID

Result number one. After 7 clicks I’m able to see my balance. Now I want to see a breakdown of recent transactions.

Statement

After 8 clicks, 2 IDs, 1 PIN and 1 password, I’m able to see my statement and my balance.

Bank of America

I’ve recently setup a US bank account with Bank of America. Here’s the user flow for wanting to view the same thing – my balance and recent statement.

Click 1: Enter my username and sign in

It actually remembered my username from last time.

Click 2: Enter my passcode

Statement

The first screen I see after logging in is ‘Account Activity’. Immediately I’m able to see a balance summary and a statement of recent transactions. That’s only 2 clicks and one passcode I had to enter.

Not only do a get a good overview of my bank account straight away, each entry includes detailed information about the transaction, including icons to help me identify what type of transaction it was.

Ulster Bank personal banking (Anytime)

It took me 4 clicks, 1 customer number, 1 PIN and 1 password to see a brief statement and 6 clicks to see a full statement.

Bank of Ireland

I once had an account with Bank of Ireland but I left before I could get a chance to test their online banking.

According to them their online banking service was not compatible with Apple Mac at the time (this was about 2 years ago).

Alliance and Leicester (Santander)

Alliance and Leicester took 5 clicks, 1 customer ID and 1 PIN to view an overview and 6 clicks to see a full statement.

What’s your experience like with online banking?

These are banking sites so obviously security is very important but does that mean the user experience has to be awful?

Until recently I assumed all online banking was terrible, but I’m very impressed with Bank of America.

Who do you bank with and how is their online banking? Why do banks not put more/any effort into UX?

You don’t necessarily have to do it five times, the point is to keep asking questions until you get down to the root of the problem, and explore various ways to solve that problem. Don’t just accept the first statement or request.

Clients don’t know what they need, that’s why they hired you

As a web designer, you’re a problem solver, and it’s good practice to use this technique on your clients.

Here’s a basic example:

Client: We need a blog.

Designer: Why do you need a blog?

Client: Because our competitor has a blog.

Designer: Why does your competitor have a blog?

Client: So their users have a place to go to read about company announcements.

Designer: Why do users need a place to read about company announcements?

Client: Every so often they add features, like us, and they use the blog to announce those features. We plan to do the same.

Designer: Why do you need to announce new features?

Client: So users can use the new features.

Designer: Why would users want to use the new features?

Client: They’ll enjoy the product more, which should help customer retention.

Designer: Maybe you don’t need a blog. A blog will take quite a lot of effort and money to design, develop and maintain. How about in-app notifications for new features, call-outs that highlight new features, a monthly newsletter, using a Twitter account for announcements, or use a tool like Intercom? Or maybe you don’t need new features at all, and there’s a better way to keep your customers happy?

Client: Never thought of that. Which one can we have up and running by this afternoon?

Get to the root of the problem

Constantly asking why can sound annoying, but it should lead to healthy discussion about how to best solve the underlying issue.

In the end the you may come full circle and implement the initial suggestion, but make sure you understand the root of the problem and explore all possible solutions before time and effort is wasted.

In June I started contracting for Kareo and as of 1st October I’ve taken a position as their Interaction Designer in Irvine, CA.

Kareo, who are they?

Kareo develop healthcare software. Specifically they help small practices and doctors get paid with their medical billing software. Think of it as an invoice system for doctors, but 100 times more complicated than any other invoice system.

For the past few years they’ve been increasing their market share with a desktop application. Now, with their recent investment, Kareo look to take things to a new level focusing on user experience and developing new web, desktop and mobile products that help their customers.

Interaction Designer

As Interaction Designer I form part of the Product Team, working closely with the Director of Product and Engineering team.

The type of stuff I get to do on a daily basis includes:

• Customer visits and research
• Product ideas and discovery
• User flows and wireframes
• Designing prototypes
• User testing
• UI design for web and mobile
• Markup (HTML/CSS)

Goodbye freelancing

As much as I love the freedom of freelancing, I felt it was time to take that next step.

There are a number of benefits working full time with a product company, that you miss out on as a freelancer, or even doing client work:

• Spend more time getting to know the customer
• Extensive prototyping and user testing
• Measure project results, and continue to iterate based on ongoing feedback
• See a product evolve through the product development life cycle
• Work with a team of talented people with different skills and learn from that team
• Be part of and responsible for the success (or failure) of a product
• Focus on the quality of work I’m producing without having to worry about billable hours

Of course there are disadvantages, and I will miss choosing what projects to work on, less meetings, being my own boss and sleeping in, but I’m really looking forward to contributing to the success of Kareo.

Some recent Kareo work

Kareo has done a great job to get to where they are today, but coming from a UX designer’s point of view there’s definitely room for improvement.

Anything I’ve been working on so far isn’t public facing yet, but you can keep an eye on some of the stuff I’m working on via Dribbble.

It’s a new challenge that I’m really looking forward to.

That was straight forward, however it took at least another 10-15 tests to determine the wording and copy to be used.

User testing copy and content

Early user testing is an important part of the product design cycle, but it’s important to not just focus on general layout and positioning, but think about the copy and content as well, and not just “figure that out later”.

For web applications this includes:

• Headings
• Instructions
• Labels
• Support text
• Inline help
• Help articles
• Buttons
• Anchor text
• Default input values
• Loading text

Takeaways from user testing copy and content

These were the main issues we found with our copy through user testing:

1. The user didn’t understand it due to the wording or jargon used
2. The user, in general, didn’t read instructions on screen and preferred to just click stuff to see what happens
3. There was too much to read so the user didn’t bother reading it
4. Inline help is useful, particularly for first time users, not so much for return/power users
5. Users weren’t 100% sure what would happen when clicking certain buttons or links

Every couple of tests we would change the copy based on feedback and observations then continue to test. So by the 15th test, there were a lot less issues or questions from the user. That said, there is always room for improvement and we’ll continue to test it and gather feedback.

Copy and content is more important than visual design

As a designer, what often matters most to you is what the user’s reaction is to the UI design; the colours, the textures, the use of subtle insets here and there.

Unless you’re building a product aimed at designers, users rarely care about this. They care about finding or producing content, so the copy that helps them accomplish their goal should be easily and quickly understood.

Don’t leave content or copy until the end. Make sure it gets tested early on along with the rest of your interface so you can iterate and improve it.

What are your biggest takeaways from user testing?

Further reading

• The Language of Interfaces by Des Traynor