There has been a lot of very relevant discussion lately about container model content and COPE methodology (Create Once, Publish Everywhere). The approach speaks well to addressing issues of layout across multiple platforms and the need to think flexibility into the way we look at content.
Adaptive content, when structured well, respects flow, findability, readability and overall cohesion. It allows content curators to define elements once that can then be pushed out to various platforms in varying arrangements to best suit platform and situation. Whether we’re talking chunks, modules, or components – the shift in thinking is the same: we look at content first, and structure components accordingly. This is distinct departure from the layout-first-content-later approach a lot of us have been working with up until relatively recently, and we’re starting to see this shift in a lot of places.
Nick Haley wrote a fantastic article recently about The Guardian newspaper’s new approach to content:
“With the container model we move away from thinking about specific pages on the site and how they might be filled with content, instead we start first with the content and each page is simply seen as a series of containers, whether we are designing the homepage, a section page like football, an article or live blog. The final order of those containers is the one which makes most sense to the business and our audience, something we discovery by testing.”
Read the rest of the article for more detail about blended containers and content curation that seeks to provide the best possible experience for users on any device.
A recent article from Ryan Holms (Founder of Invoke) tackles the age old question of what start-ups should prioritize – design or engineering? Answer? Both. There isn’t anything under the hood without great engineering, but putting lipstick on an existing code base doesn’t work either.
We’re apt to agree: some of the projects we’ve been most proud of lately here at Plant have been the ones where we’ve got that bit right: with kick starts that have development and design putting their heads together from day one.
Read the entire article here: medium.com/@invoker/design-and-the-startup
Weather driven personalisation is capitalizing on an estimated $3 trillion in private sector business – via everything from mobile app and social mobile ads, to email campaigns to in-store digital signage. The combination of Weather Channel’s 75 years of weather pattern data and historical purchase patterns is enabling retailers to drive sales of argan oil to frizzy haired women on humid days, crisp cold brew to beer drinkers on hot days, and crafting materials to creatives on days leading up to extended periods of rain. The subject of weather just got a little more interesting, didn’t it.
Read more here: www.getelastic.com/why-weather-driven-personalization-is-hot-hot-hot/
Posted on May 21st, 2014 at 14:05 in User Experience.
We find ourselves easing client fear of long formatted pages quite often – with fair reason given the holy position “above the fold” design has occupied for so many years. A recent article from Nielsen Norman Group comes therefore as a welcome sign (and tested proof) that times have changed.
While the article focuses on usability issues associated with accordion interface usage, the point is still clear: users scroll – as long as you give them good reason to. The heat tracking image above, from NNGroups research report “How People Read on the Web: The Eyetracking Evidence” shows how far and how much people read on a long page requiring a lot of scrolling. So while users spend considerably more attention above the fold, we needn’t fear the long page with a lot of content, as long as we present that content properly.
Of the many UX and design trends predicted for 2014: flat UI, mobile first, yet more scrolling, less text, minimalist navigation, video backgrounds – one that we’re especially loving is micro UX. This ‘design is in the details’ approach is guided by principles aimed at bringing the data forward, preventing human error, speaking human, providing feedback long loops and setting smart defaults (don’t start from zero).
Clean, clever and often subtle details can make a huge impact on user experience – so when we see a great example, we sit up and take notice. Here are a couple of recent finds we’ve found inspiring:
1. Daily Beasts progress indicator. The article menu double duties as a 5 piece progress bar.
2. Hulu.com’s search box, which is designed in 3 states: subtle when inactive so that it doesn’t distract from the video stream, brighter when the user needs and interacts with it and lastly – filled with a white background when the user types so that it is easier to read.
For further reading check out:
eConsultancy: 18 Pivotal Web Design Trends for 2014
FastCo Design: The Future of UX Design: Tiny, Humanizing Details
For the last few years, responsive design has dominated the way we think about, work with and approach website development. Layouts need to adapt to suit massive desktop monitors, tiny 13” laptop monitors, tablets, mobile phones, phablets, (combination mobile phone/tablet), landscape mode, portrait mode, retina displays and well… everything in between.
New demands call for new methods and while we can’t shelve the necessity of photoshop mock-ups for client review and approval – what we can do is shift some of the time we’ve traditionally invested in multiple photoshop templates into style guide development (so to speak) so that we can bring the design process into the browser a little sooner. That requires letting go of pixel perfect mock ups in favour of more fluid and flexible design – but in the end that means fewer compromises, surprises and ’broken’ layouts at obscure resolutions or screen dimensions. It means design that works across a broader and often unpredictable spectrum of platforms and devices.
There are some fantastic articles & resources out there that address these issues well. Check out:
1. Style tiles: when a mood board is too vague and a comp is too literal. There’s also a template available for download.
2. Great responsive design is a matter of process – a very worthwhile post from Syncore about RWD Workflow.
3. Design process in the responsive age – an important read from Smashing Magazine
Posted on April 1st, 2014 at 13:04 in Social Media.
We love responsive and we love sharing. Find them here: http://kurtnoble.com/ or get the code on Github.
At Plant we do a lot of work with non-profits and are therefore always on the lookout for ways to up their impact so we can help increase awareness and generate as many donations as possible.
That’s why this independent study from U1 Group piqued our interest. The Australian UX Consultancy compared UNICEF and Red Cross websites to see what kind of effect good usability has on securing online donations. Both websites were seeking online donations to assist those directly affected by the Syrian crisis.
The result? UNICEF came out ahead – and here’s why:
1. The UNICEF site rated slightly higher in terms of ease of use and more users reported that they were very satisfied with their website experience.
2. The UNICEF site had higher task completion rates. A significantly greater number of users were able to both locate the page required to enter personal details for making a donation and as well as complete the transaction.
3. The ability to find specific information related to the crisis is important for potential donors. Not having this information clearly visible or easy to navigate to is often sited as a major impediment for many potential donors. How the money will be used, transparency of administration, and a secure online payment process were also rated as very important. Users were better able to locate this information on the UNICEF website.
The conclusion: optimising user experiences has a measurable (and considerable) effect on the bottom line: maximising online donations.
Posted on March 12th, 2014 at 16:03 in User Behavior.
Browser capabilities, platform variations and user interface conventions have made incredible strides over the last decade but some behavior basics stay the same: users scan web pages and use text links, among other things – like headers and bolded keywords – as sign posts. A recent Nielsen Norman eyetracking study showed that:
In the first few moments on the (..test) page, the user scanned the first two paragraphs following an F-pattern, but then switched to looking primarily at the links.
1. Make links easily scannable:
Underlined blue text is still the most obvious visual indicator of a link.
2. Make links meaningful but by starting them with keywords that communicate what each section is about and clearly indicate where they will navigate users next. Link text should make sense on it’s own and not exclusively in context.
Source: NNGroup: Writing Hyperlinks: Salient, Descriptive, Start with Keyword