Arrows in interfaces

Arrows are common in the interfaces we interact with on a regular basis. Since they are used so frequent and in many different ways, they are easily misused leading to a confusing user experience.

My goal with this post is to categorize the usage of arrows, show some examples and give you some pointers (pun intended) if you’ve decided to use arrows in your interface.

Buttons and links

Arrows are sometimes used with buttons or placed next to links in order to make them more noticeable and clickable.


The classic iOS back button made to look like an arrow hinting clicking it will bring you back one step.


A link to a new page at m.adlibris.se.

I’m very skeptical towards placing arrows before or after regular links. A blue underlined piece of text looks more like a link and an arrow next to the text might fool the user thinking a click will expand more content instead of navigating to a new page.

Position indicators

Check out breadcrumb trails on some sites and you’ll definitely see multiple arrows pointing to the current section.


The breadcrumbs pattern at telia.se.

Left panel navigation menus can use an arrow to show which page you are currently at.


The left panel navigation for WordPress admins.

Continue reading

Best tweets from An Event Apart: Atlanta 2014

It’s time for An Event Apart again! This time the popular web conference is talking place in Atlanta. I’ve gone through the #aeaatl hashtag on Twitter and these tweets have sparked my interest.

Continue reading

Best tweets from An Event Apart: San Francisco 2013

Today An Event Apart wrapped up in San Francisco after presentations by industry greats such as Erika Hall (@mulegirl), Chris Coyier (@chriscoyier), Ethan Marcotte (@beep), Samantha Warren (@samanthatoy) among others.

As usual, I spent time following the #aeasf hashtag on Twitter in order to gain some knew insights and skills.

Here are my favorite tweets from the event. For more info visit aneventapart.com/event/san-francisco-2013.

Continue reading

Boost your productivity in OS X

Working with UX, graphic design and web development I spend a lot of time in front of my Mac. Because of this I’m always trying to find ways to boost my productivity. Since I’ve been using a Mac since the mid 90′s I’ve learned a thing or two. Here’s my advice for boosting your productivity in OS X!

Apps

Some third party help is definitely useful!

Alfred

Similar to the built in Spotlight search, but more configurable and powerful. Active it with a keyboard command to find, open and toggle stuff like:

  • Apps
  • Documents
  • Folder
  • Contact information
  • Empty trash bin
  • Turn off computer

Get Alfred at alfredapp.com

Alfred improves its search results depending on what you search for and do.

Continue reading

Why my WordPress site is faster than yours

Sorry about the cocky headline, but this is important and I needed your attention.

2013 is about to wrap up and the web should be in a much better state than it is. We got the tools to build great looking and blazing fast websites that make you go “Holy shitballs Batman!”, but we don’t. Websites today are obese and slow. It’s sad.

Here’s some depressing statistics:

  • 72 % of responsive websites weigh just as much regardless of screen size
  • The average website weighs 1614 KB
  • Images stand for 61 % (987 KB) of this weight
  • 80 % of page load times are due to the front end

Why good performance matters:

  • Higher conversion rate
  • Higher Google page ranking
  • Waiting SUCKS

With this in mind I set out to make alexanderskogberg.com as fast as I could. Here’s what I did!

1. Responsive images

This is without a doubt the best performance optimization you can do for your WordPress site. I’m talking about implementing a Javascript library that loads different versions of an image depending on the screen size of the user’s device.

I use the excellent plugin Picturefill.WP. Download it, activate it and your done. Amazing!

Check out this example page and test for yourself.

  • 1000 pixel wide browser window = 319.3 KB image weight
  • 400 pixel wide browser window = 81.8 KB image weight
  • That’s about a 74 % decrease in weight

Continue reading