Wednesday, September 27, 2017

What do we do with all this mess? Enter content modelling

We know that content is important, but we’re just not sure what to do with it.

As UX professionals, the tools we know – wireframes, customer journeys and site maps – are fine for a high-level vision.

But what happens when you have to get stuck into the guts of the content. When you’re wrangling a website with hundreds of pages, each one with text that runs down your monitor, across the table and onto the floor?

When you’re wrangling reams of page-level content, it can be tempting leave it in the too-hard basket. To design the website and leave it for the client to write the actual content.

What we’re doing here, though, is only designing part of the experience. We leave a vacuum that’s filled by ad hoc, inconsistent content, lorem ipsum, or worse.

Enter content modelling. It’s a discipline that began in the heady days of database design, but has been picked up and championed by content strategists around the world, including Rachel Lovinger.

In 2012, she published an article in A List Apart which set the stage. Here’s Rachel Lovinger’s definition:

A content model documents all the different types of content you will have for a given project. It contains detailed definitions of each content type’s elements and their relationships to each other.

We can break this up into three parts:

  1. Understanding what types of content you have
  2. Analysing the parts each type is made up of
  3. Defining how those parts relate to each other

What makes content modelling so different to other ways of working? That difference comes into focus when we compare content modelling to the conventional way of wrangling content.

The badlands of content

Conventional approaches to content are consistent – but only to a point. Let’s take a look at how that plays out in an actual website.

Imagine you’re a dementia researcher, based at the University of Sydney. You’re looking for money to fund the next round of your research, so you come to this grant page:
You wonder if there are other grants out there that you could apply for. That brings you to this grant page:


The same type of page, but two totally different content structures. You see that key dates are highlighted on one page, but not in another.

Why is this a problem? Well, it’s the same problem that arises wherever there is an inconsistent user experience. The user can’t learn a pattern that they can imply to interpret new instances of that experience: look at one grants page, and from that, work out how to read other grants pages.

The downside of this inconsistency was born out by user testing. Medical researchers told us they had to find a workaround: actually printing off grant pages, lining them up side-by-side and highlighting parts. That was the only way they could make sense of the content.

Content as blob

What’s interesting is that on one level, the experience actually is consistent. You can imagine these two grant pages being written using the same wireframe. They share a colour palette. It’s just that the consistency doesn’t go far enough – to the level where the user is actually interacting with the content.

The content itself is like plasticine: it has been shaped into a given form, but there’s no internal structure. It’s just a massive undifferentiated blob. You can’t break it down into components. You can’t do anything with the parts.

Content as lego

Another way we can think of a content model is like a lego set. The product has a shape and format – let’s say ‘rainbow princess castle’.

But it also has components that we can work with:

  1. Give them names (‘window’ or ‘turret’)
  2. Describe their attributes (‘round’ or ‘turquoise’)
  3. Combine them in different ways to create new formats (let’s say ‘ninja dragon cave’)

Now here’s part of a content model that we’ve created for the NHMRC.

  1. We’ve described a particular format, in this case a grants page.
  2. We’ve also specified some components that will exist within that page. For example, we have a block that talks about key dates.
  3. We’ve described the attribute of each component. In this case, it’s listing essential dates to mention. Other attributes could include whether that content is essential or optional.
  4. We’ve defined relationships between components: what brings us to this particular page, and some outbound paths: where they’re going to go next.

All this is great for making sense of a mess, but where it really takes off is what content modelling lets us do.

Content modelling at your service

Here are just a few ways you can put content modelling to work.

1. Analysing existing content

When you dive into the guts of page content, you get a much better sense of the site you’re dealing with. If you run a surface-level content audit, you might categorise page by topic. One topic.

When I get into content modelling on a government site, I’ll often find a mega page with six or seven moving parts that really need to be their own pages. That’s good to know for defining a better information architecture.

2. Communicating with designers

Content models inform design but don’t dictate it. The model provides an agreed list of the elements that are needed – and shows hierarchy and proximity. But how that actually looks is still up to the designers.

Because content models are presentation neutral, they’re also device neutral. Content models help you plan content that needs to flow between different devices (print – mobile – web) – as Sarah Wachter-Boettcher describes in her spectacular book, Content Everywhere.

3. Guiding authors

Content models put parameters around the content right when authors need it most – actually writing the content. You can specify exactly what elements a page needs. With the help of a tool like GatherContent, you can provide in-line guidance to authors on how to write a good headline, or intro paragraph.

Most big organisations have a writing style guide. And most staff in those organisations ignore it. It’s not because they don’t care about content, it’s because the advice isn’t integrated into their workflow.

That takes the burden off the authors — and everybody who has to QA the work.

4. Planning your CMS

A detailed content model can feed right into the specifications for a new content management system. Angus Gordon’s article is a good entry point here.

When you’re choosing a CMS, content modelling will help answer questions including:

  • What components are included
  • Whether the component is required
  • Whether alternative values are allowed (such as different content for geographical locations).

Wrap-up

As UX practitioners, we know that people don’t come to websites to appreciate pretty colours. But nor do they come to appreciate a slick UI, or an intuitive navigation. They come to get something done. That almost always means using information, and that information is content.

Wherever content starts to gain scale and complexity, content models are useful as a practical way to rein it in. To create content that integrates into your overall UX vision, and has the consistency you need for a complete experience.

Next time, we’ll run through how to actually create a content model.

The post What do we do with all this mess? Enter content modelling appeared first on UX Mastery.


by Matt Fenwick via UX Mastery

Illdy

‘Illdy’ is a free One Page WordPress theme by Colorlib suited for a simple freelancer or agency portfolio. The portfolio items are simply thumbnails with custom links – so you can link to live websites, case studies on Behance or even Dribbble shots. Features include smooth scroll, big hero image with clear buttons, skills graph, testimonial slider, news feed, team and a contact form.

Full Review | Direct Link


by Rob Hope @robhope via One Page Love

How to Use Smartphones & Tablets to Boost Your Kid’s Education #[infographic]

The Internet and Mobile revolutionized education. From Education 1.0 in the XXth century and over Education 2.0 on the edge of millenniums, today we enter the era of Education 3.0. Kids and teenagers are the ones who have the first-hand experience of how everything is changing. Only yesterday they...

[ This is a content summary only. Visit our website http://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Web Desk via Digital Information World

Gunter Piekarski

Unique One Pager with a minimal stacked-concept where users click to reveal the work and info of designer Gunter Piekarski.

Full Review | Direct Link


by Rob Hope @robhope via One Page Love

How to Design Highly Memorable Experiences, and Why

According to Gartner, by 2017, 89% of marketers expect customer experience to be their primary differentiator. In order to create terrific customer experiences that set our apps and websites apart, we need to learn a bit more about how our brains work, and how we can create experiences that are memorable.

Fact: human brains are lazy. We love a shortcut.

Let's take a look at how that impacts on the way we design user experiences, and how we can design for lazy brains.

The Peak—end Rule

Nobel Prize winner Daniel Kahneman suggested that modern-day humans employ a a psychological heuristic (basically, a mental shortcut) called the peak—end rule, which states:

People judge an experience largely based on how they felt at its peak (i.e., its most intense point) and at its end, rather than based on the total sum or average of every moment of the experience. The effect occurs regardless of whether the experience is pleasant or unpleasant.

Let's think about that for a second. It's a big deal.

When we remember experiences, we tend to recall only snapshots of the key events that happened. This means that we might easily recall a singular negative event (like a rude customer service representative) and forget the better but smaller aspects of the experience (like a well-designed website). Or, vice versa, we might dislike an experience overall (bad website UX), but what we'll remember later is the terrific customer service received.

The Peak-end Rule: an Everyday Example

An everyday example of this is movies. Have you ever watched a brilliant movie, only for it to be spoiled by a disappointing ending? Two hours of spellbinding suspense can be rendered useless with a bad ending, much like an exciting online shopping experience can be ruined by a confusing/frustrating checkout.

Even if the middle of the experience was faultless, that's not the aspect of the experience that users will remember.

Boost Peak Moments with Friction

So we know that our brains like shortcuts. We know they remember the end and the most intense moments of an experience more than any other moment. In addition to that, we should also remember that our memories are faulty; they aren't always correct. People won't always remember what you said to them, but they'll remember how you made them feel.

So, with that in mind, we can then make changes to the experience to ensure that users forget negative moments, and remember positive ones. Some menial tasks, such as filling out a form, users won't want to remember. By simplifying the experience and removing friction, users can breeze through this step. We don't want the peak moment to be a horrendous one.

Airbnb Example

The same applies to positive experiences. Let's say you've booked an apartment on Airbnb. That's pretty exciting, right? Of course it is: you're going on holiday! To ensure the possibly frustrating search experience doesn't overshadow the excitement of your booking, Airbnb adds friction to keep you excited for a little longer. Here's what Airbnb does:

  • shows you things to do in the area
  • lets you read the house manual
  • lets you send the itinerary to your travel buddies
  • helps you find directions to the address
  • sends you an exciting "You're going away!" message

Not only does this often overshadow the somewhat long/boring search for an Airbnb, but it improves the user experience towards the end as well. Now, when the user remembers Airbnb, they'll remember how exciting it all was. Even though Airbnb bothers us with sending itineraries and recommendations, this is the sort of friction we're happy to engage in.

In short: stretch out positive moments, and relieve the user of negative pain points quickly by removing friction.

Uber Example

Remember taxis? Remember arriving at your destination and then fiddling around for cash? Yeah, this can be awkward. You realize you don't have the right change, so you pay with credit card; the card machine isn't working, so you have to drive to the ATM.

It's a rather awful, frustrating, embarrassing experience.

Your Uber account is linked to your bank card. Once you've arrived at your destination, you hop out of the car and you're done. Fiddling around for cash is not necessary; that pain point has been removed, and so the user walks away with their final experience with Uber being one of delight.

Embrace "Flat" Moments

Flat moments are moments that are neither fun nor boring.

An excellent example of a "flat moment turned memorable" might be from way back in the early 2000s, from an e-commerce website called CD Baby. Typically, when you make a purchase online, you receive an email confirmation to notify you that your purchase went through smoothly. This is fairly standard, and important.

Derek Sivers at CD Baby knew how flat this experience would be, and didn't want to end it with something that wasn't memorable, so he thought he'd have some fun. He put on his best copywriting mitts and came up with the following confirmation email:

CD Baby email

People loved it. It went viral. Derek had turned a boring aspect of the experience into an unexpected delight. People were suddenly purchasing from CD Baby just to see the email (remember, this was the early 2000s!). If we map out the customer journey, we'll find that the email had become a peak moment, and a surefire way to create a memorable experience as the user --- hopefully temporarily --- departs from CD Baby.

Continue reading %How to Design Highly Memorable Experiences, and Why%


by Vincent Feeney via SitePoint

#309: Web Performance in The Real World - How to Make Fast Sites

Frontend Focus
Issue 309 — September 27, 2017
Giulio Mainardi explains the new font-display property and how it will help CSS developers improve rendering of fonts during page load.
SitePoint

A lot of stuff packed into this huge infographic from tags and events to canvas methods and a support grid.
Bradley Nice

A set of interfaces which expose sensor devices within Chrome (for now).
Google Developers

Most applications require some use of a data grid, and making a grid accessible can be a big challenge. Take a look at how Wijmo made FlexGrid accessible with ARIA standards and more.
GrapeCity Wijmo   Sponsor

React 16 has been released and redesigned from the ground up to support asynchronous rendering without changing the public API.
Facebook Code

An exploration of work the Microsoft Edge team does to help developers build faster sites, and how to think of performance as an investigative activity, beyond a checklist approach.
Nolan Lawson

How travel site Trivago went from neglecting accessibility to making it an important part of what they do.
Ian Devlin

The beta of a whole new Firefox is out now, one that’s powered by a completely reinvented, modernized engine, called Firefox Quantum.
Mozilla

Eiji Kitamura, a developer advocate at Google, calls out some common misconceptions about the API and tries to comprehensively address them.
Google Dev Channel

Jobs

Can't find the right job? Want companies to apply to you? Try Hired.com.

In Brief

New WebKit Features in Safari 11 on iOS 11 and macOS High Sierra news
It adds WebRTC, WebAssembly, Variable Fonts, Timing APIs and more.
Jon Davis

Changes to Chrome's Video Autoplay Policy news
Muted autoplay will be fine, but for audio to play some conditions must be met.
François Beaufort

Chrome 63 To Label FTP Servers As 'Not Secure' news
Zeljka Zorz

2017 Chrome Developer Summit is coming to San Francisco news
Join us in San Francisco & on the live stream as we explore building beautiful and performant experiences.
Google, Inc.  Sponsor

Intriguing CSS Level 4 Selectors tutorial
Including :placeholder-shown and :user-error
Dennis Gaebel

Designing Websites for the iPhone X tutorial
Advice from the WebKit team for handling the iPhone X ‘notch’.
WebKit

Playing With Color: Vibrant Options For Apps And Websites tutorial
Nick Babich

An Introduction to WebRender: Firefox's New 2D Renderer story
Nicolas Silva

Exploring Animation And Interaction Techniques with WebGL story
Karim Maaloul

Using JavaScript for Speech Recognition in the Browser video
Wes Bos

5 Things CSS Developers Wish They Knew Before They Started opinion
Andrés Galante

$20 Free on a new Linode account tools
Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit.
Linode Cloud Hosting  Sponsor

3 Tools for Working with Web Animations in Firefox tools
Mozilla

Diffee Checker: Check Visual Differences Between Sites tools
It uses CSS blend modes to do it.
Una Kravets

Logo Crunch: The Multi-Resolution Logo/Favicon Maker tools
Uses computer vision to make a high-res graphic more legible at lower resolutions.
Brandmark

winamp2-js: An HTML5 Reimplementation of Winamp 2.9 code
Demo.
Jordan Eldredge

AR.js: Efficient Augmented Reality for the Web code
Jerome Etienne

Wretch: A Tiny Wrapper Around Fetch with an Intuitive Syntax code
Julien Elbaz


by via Frontend Focus

#177: Designing Websites for the iPhone X

Mobile Web Weekly September 27, 2017   #177
Chris Brandrick recommends
Designing Websites for the iPhone X — Advice from the WebKit team for handling the iPhone X ‘notch’.
WebKit
Brian Rinaldi recommends
Progressive Web Apps? No, We Are Building Alien Web Apps — A look at the strategy being used by Conde Nast to integrate PWA features into a site that is server-side rendered and “not appy.”
John K. Paul
Sponsored
Linux cloud hosting starting at 1GB of RAM for $5/mo — Get a Linode server up and running in seconds. Simply choose your plan, distro and location and you’re ready to deploy your server. Use promo code MOBILEWEB20 for a $20 credit on a new account.
Linode Cloud Hosting

Holly Schinsky recommends
The End of Framework Churn — The CEO of Ionic suggests that incompatibility between component models results in framework churn and that Web Components will provide a resolution.
Max Lynch
Brian Rinaldi recommends
Even More Hacker News Progressive Web Apps — New Hacker News Readers as PWA examples include StencilJS, Glimmer, React with create-react-app, vanilla JavaScript, Zuix and Next.js.
Addy Osmani
Chris Brandrick recommends
Greased Lightning: Turning Your Site Into a PWA — Sam Beckham shows us how to get that load time way down using nothing but best practices and a simple service worker.
Frontend NE
Brian Rinaldi recommends
How To Build An Ionic App With a Graphcool Backend
Ashteya Biharisingh
Chris Brandrick recommends
Getting Your Ionic Apps Updated for iOS 11: Checklist — There are a few things you need to do and some steps are different depending on whether you’re using UIWebView or WKWebView.
Max Lynch
Peter Cooper recommends
How to Develop a Cordova Android Plugin
László Csele
Holly Schinsky recommends
What's New in Framework7 V2 Beta — A 5 minute overview of what’s new in the beta version of Framework7 v2.
Timo Ernst
Sponsored
State of Production Database Performance 2017 — In this report we explore and definitively answer whether MySQL or PostgreSQL is truly faster than the other.
VividCortex

Chris Brandrick recommends
react-native-firebase: A Firebase Implementation for React Native — A well-tested feature rich Firebase implementation for React Native, supporting iOS & Android.
Invertase
Holly Schinsky recommends
A/B Testing for React Native Apps with CodePush — How to perform A/B Testing using CodePush with React Native to optimize user behavior.
Parashuram N
Chris Brandrick recommends
Tips for Successful App Development with React Native — Some things to consider when starting to work with React Native for mobile app development.
Maz Ahmadi
Brian Rinaldi recommends
Chrome Breaks Visual Viewport — Again — If you use window.innerWidth/Height in any of your sites, it may break in Chrome 61/Android.
PPK


by via Mobile Web Weekly