Posts Tagged ‘Mobile’

How to add social design to your user experience design

Posted on: January 3rd, 2013 by Fransgaard 2 Comments

Each day social media becomes more and more integrated with our digital lives and as such web interfaces that doesn’t incorporporate social media elements are already starting to feel old.

However, in many ways social media is still seen as a marketing or PR tool and often bolted on at the end of the user experience and user interface design as an afterthought.

Here’s a few tips on how to consider social design as an integrated part of user experience design.

Social media as social proof

There are several places to put social elements such as sharing tools, displaying how many comments a page has and associated profiles of authors or the company itself.

But depending on where they are placed on the page they serve different purposes.

For example adding  Google+ or a Tweet buttons to the top of the page serves as much as social proof assuring the newly arrived reader that several others have read (and enjoyed) the content beforehand with the numbers the buttons display.

Social media as engagement

Adding social elements after the main content serves as an option for the reader to share the content and engage further by commenting, joining groups.

As the main content is read, don’t be afraid to expand on the social elements. For example instead of just adding a Facebook Like button why not write: “Did you like our article? Sharing is caring. Thank you for sharing. It encourages us to write even more.”

Or instead of an anonymous comment box why not invite readers by writing: “So this was our view on pea farming, but what do you think? Please tell us your pea story.”

Social media as part of content

The last example touches on how content can be optimized for social sharing, because the call-to-action text specifically refers back to the content (pea farming), which makes it directly associated and as such more relevant.

Other ways to make content more social is to make content shareable. A classic example is writing good headlines and lots can be learned from traditional newspaper copywriting. Good headlines are by definition short and memorable which makes them ideal for social sharing especially with character count constraints.

A lesser known trick is to make quotable sound bites in pull-out quotes during the main body copy and add social sharing buttons to the pull-out quote, which uses the actual quote as the shared copy rather than the headline copy.

And don’t forget social as part of mobile

This is what made me think about social design as part of user experience design in the first place: Why is social sometimes forgotten as part of the mobile user experience?

Many mobile optimized interfaces do not have the basic social sharing buttons forcing users to switch to “Full site” as it is even harder to copy and paste from a web page to social tools on mobile devices.

And some are even missing the commenting facility as well as other readers’ comments losing valuable user-generated content.

Social design as part of the bigger pervasive user experience

User experience doesn’t stop at page level. What happens after the reader shares content to her Twitter account or joins the Facebook group associated with the author? I will look at that in a future article.

How do you see social media as part of user experience as a digital professional? What do you you rely on (or miss) as a user yourself?

4 ideas for Details in Responsive Design

Posted on: August 29th, 2012 by Fransgaard No Comments

The original version of this article can be seen at the award-winning Capgemini – Capping IT Off blog.

I have previously covered what this new trend in digital called “Responsive Design” is, but I have since been thinking about how granular a responsive design can be and it can be quite detailed.

Here are four ideas I have been toying around with:

1: Responsive imagery

Images is a big part of websites and brands so presenting these in the best manner is important. One way to make images responsive is changing the width and height of the images depending on how big the user’s screen is.

This requires imagery which are optimised for the largest expected size and then scaled down visually. However, while the image might fit on a mobile phone using this technique it will still drain the bandwidth as if the image was full-size.

A better option is a server-side system that feeds correct images depending on what device is being used.

This can also work in favour the other way by raising the quality of the images to meet the opportunities presented by a new generation of screens with much higher resolution led by Apple’s retina display.

2: Responsive typography

Just because a website doesn’t repurpose it’s design grid depending on the user’s screen resolution doesn’t mean we can’t make the experience better for large screen users. One way of doing so is by making the typography responsive.

As people with bigger screens tend to sit further back making the font-size larger even in a fixed width scenario seems like a perfectly helpful solution.

Bigger text is also helpful on mobile devices. iPhones have the “Reader” function in its browser allowing users to convert websites into a much more legible format using bigger text size.

This is good for usability but not so good for the website owners as it takes the users away. This leakage can be prevented by the websites themselves providing equally strong typography on mobile devices.

3: Responsive copy

People on mobiles generally don’t like to read as much (it seems news sites are the odd ones out in this) as such it might be worth developing two copy sets; One that’s more summary based, shorter and punchier for mobile devices and one that is more detailed for bigger screens.

In fact, the two could probably be written in clever fashion to work together on bigger screens… maybe every other paragraph is removed from the mobile version.

4: Responsive link labeling

While I have previously argued that “Click here” is not necessarily bad for usability there are still some elements to consider such as; how do you ‘click’ on a touch pad?

With responsive design the link labels could be updated depending on device adding an extra little detail to the overall user experience.

…And other responsive ideas

I’ve been thinking about other ideas; Responsive sitemaps, responsive navigation, responsive colouring (if I can measure amount of sunlight hitting the screen) etc.

At the end of the day the question is: When does it stop being commercially sensible to maintain a single super responsive website over multiple, channel-specific sites?

I don’t have the answer to this yet, but I am excited about where responsive design is taking us as I think for the first time digital is fully breaking away from it’s print-based heritage.

The difference between UX and UI and what it means to your customers

Posted on: July 27th, 2012 by Fransgaard 1 Comment

The original version of this article can be seen at the award-winning Capgemini – Capping IT Off blog.

For this article I’ve enlisted my boss Windahl Finnigan, who heads up the Capgemini UK UX team and we’ve been discussing for a while about how to best describe the difference between User Experience (UX) and User Interface (UI) as the two are often confused with each other but they are vastly different entities.

A well-used example is that riding a horse is the User Experience while the saddle, the bridle, etc is the User Interface.

However, riding the horse is actually better described as an Activity that forms part of the overall User Experience.

The User Experience is everything that covers the full experience and everything related before, during and after the ride: The track, getting to and from the track, the thrill of the cheering crowd , looking at the photos of you flying off the horse days after the actual ride and so on.

Riding the horse may have been great and getting thrown off was a fun (and somewhat humiliating) lesson that made you respect skills of seasoned riders.

But two weeks later your leg still hasn’t recovered from the fall, you call the stables but they won’t even listening to you quoting disclaimers you signed when mounting the horse… Suddenly the User Experience of the ride is quite different.

However, the User Interface (the saddle, bridle etc) remains the same as before the change in perception of the User Experience. The materials and tools haven’t changed.

The best way of describing a User Experience is you cannot perceive it while you are in it. Only after it is over can you comprehend and review the User Experience with the benefit of hindsight.

What it means to your customers

A good User Interface creates trust. Trust that the site will work, trust that the company offers a professional User Experience as promised by the professional looking User Interface. But without applied User Experience Design it only forms a single step in a what is a multi-step process. Not having the other steps can leave the user feeling unengaged and with no clear direction or encouragement.

A good User Experience nurtures customer loyalty by creating a consistently good experience throughout the user’s journey no matter what path they may follow. The User Experience delivers on the promises of the professional looking User Interface.

Why User Experience has emerged as such an important craft

In the early days of the web Graphic User Interface Design, User Experience Design, Information Architecture, Frontend Development and more were all the responsibility of a single role: The Web Designer.

Today, the tasks are split out into a range of roles for a number of reasons:

  • The digital industry has grown immensely in a short period of time. So has the digital projects and their importance to the businesses. Where a digital presence used to be a fringe investment, it is now part of the core business model.
  • Each area of expertise has grown ever more complicated to accommodate for the explosive growth of the web estates. No need to look further than the backbone of the web: HTML. The first version had only 50 tags in total! Today we have a much more extended toolset in HTML5, CSS3, Ajax, Javascript and serverside scripts like PHP and ASP etc. It is a full-time job to learn and keeping up with just this single facet of the industry.
  • In the early days the User Experience was limited to a single website. Today it extends across a range of delivery mechanisms and channels: Websites, Digital Marketing, Social Media, not to mention Mobiles, Tablets, Interactive TVs, Games stations, Touch Screens etc. As such maintaining a consistent User Experience across is a complex task involving Creative Skills, Strategic Thinking as well as Psychology, User Research and much more.
  • And last, but absolutely not least, there is the expectations of the Users. While the web has grown ever more complicated, the Users have equally grown more impatient and demand simpler and faster experiences. As Steve Jobs, the former CEO of Apple, said: “Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.”

So what about Customer Experience vs User Experience?

The term “User” has become associated with digital interfaces where the word “Customer” feels more at home in traditional marketing/CRM/PR terminology. But the fact is due to the impact and integration of the Internet with everything, the experiences on- and offline are naturally flowing together into a single Experience.

In practical terms Customer Experience and User Experience are for most parts interchangeable. The main difference being User Experience has a wider reach as a Customer is automatically a User of the Experience, while a User may not necessarily be a Customer (they could be a competitor, a colleague, a partner etc).

The important takeaway from this article is the difference between User Interface and User Experience as the former is only a single step of the full path that is the latter.