Web design (5): Structure

A collaborative medium, a place where we all meet and read and write.
Tim Berners-Lee

[Part 5 of 7 : 0) intro, 1) story, 2) pictures,  3) users, 4) content, 5) structure, 6) social media, 7) evaluation]

Many designers have adopted a grid structure to design web pages because a) it lends itself well to responsive design and b) it allows a design which is easy for users to understand. Designers literally have about five seconds before a user will click away to find a different service/page/content provider if the page is laid out in a way which is difficult to understand.

In a great talk for An Event Apart, Designer and Developer Advocate at Mozilla, Jen Simmons looks offline at magazines for inspiration and remembers how there was much experimentation and creativity online until everyone adopted grids and fell into a rut of grids.

But, it is easy to understand why everyone adopted grids, because users create their own understanding of a webpage from its structure. Text is complete within itself and meaning comes from its structure and language rather than the ideas it contains. This is a fundamental principle of semiotics, the study of meaning.

Managing expectations

When a webpage is judged to be useless, it is often because it does not behave in the way the user is expecting, particularly if it is not very attractive.

Designers either need to manage a user’s expectations by giving them what they are expecting in terms of the service they are looking for, or they need to make it super attractive.  Attractive things don’t necessarily work better but we humans perceive them as doing so  because they light up the brain’s reward centre and make us feel better when we are around them. We are attracted to attractive things which is given by certain Gestalt principles such as unity, symmetry, and the golden ratio.

Gestalt: similarity, promixity

Good design is one thing, but we also have specific expectations about  any given webpage. We scan for headings and white space and interpret a page in those terms.  This is because according to Gestalt theory we will interpret items according to their proximity: items which are close together, we will group together; or similarity, items which are similar we interpret as together.

And also, because we have been to others sites and we transfer our experiences from one site to another and anticipate where certain functions should be.

Where am I? Where have I been? Where am I going?

Main menus are usually at the top of the page, grouped together and are used for navigation through the site.  Secondary navigation may take place in drop down menus, or in  left or right hand columns. Specific house keeping information can be found in the footer, or the common links bar if there is one.

If users are completely lost they will use the breadcrumbs, which Google now uses instead of the URL of sites as part of the results their search engine serves up. Therefore, it is in a designer’s interest to put breadcrumbs on the top of page.

Users will stay longer and feel better if they can answer the three questions of navigation as articulated by usability consultant Steve Krug:

  1. Where am I?
  2. Where have I been?
  3. Where am I going?

Often this answered by changing links to visited, not visited and enforcing the consistency of the design by adopting a sensible approach to colour. There is a theory of colour in terms of adding and subtracting colour to create colour either digitally, or on a palette, but there is alas, no theory about how to use colour to influence branding and marketing, as personal preferences are impossible to standardise.

HTML 5 & CSS 3

As discussed earlier in part 1 of this series, we separate out our content from our presentation which is styled using CSS 3. Then, once we know what we want to say we use HTML 5 to structure our text to give it meaning to the reader. This may be a screen reader or it may be a human being.

HTML 5 breaks a page into its header and body, and then the body is broken down further into specific instructions. Headings from <h1> to <h6>, paragraphs, lists, sections and paragraphs, etc., so that we can structure a nice layout.  There are thousands of tutorials online which teach HTML 5.

The nice thing about sections is that we can use them to source linked data from elsewhere and fill our pages that way, but still keep a consistent appearance.

Theoretically one page is great, or a couple of pages fine, but once we get into hundreds of pages, we need to think about how we present everything consistently and evenly across a site and still provide users the information for which they came.

Information architecture

Information architecture (IA) is the way to organise the structure of a whole website. It asks: How you categorise and structure information? How do you label it so that users can navigate or search through it in order to find what they need?

The first step is to perform some knowledge elicitation of the  business or context and what everyone (owners, customers) known as stakeholders expect from the proposed system. This may include reading all the official documentation a business has (yawn!).

If there is a lot of existing information the best way to organise it is to perform a card sort. A card sort is when a consultant calls in some users, gives them a stack of index cards with content subjects written on them, along with a list of headings from the client’s site—“Business and News,” “Lifestyle,” “Society and Culture”— then users decide where to put “How to floss your teeth”.

This can take a few days each time and a few goes, until a pattern is found, us humans love to impose order on chaos, we love to find a pattern to shape and understand our world.

Once we have a structure from the card sort, it becomes easier to start designing the structure across the site and we begin with the site map.

The site map reflects the hierarchy of a system (even though Tim Berners-Lee was quite emphatic that the web should not have a hierarchical structure).

Then, once a site map is in place, each page layout can be addressed and the way users will navigate. Thus, we get main menus (global navigation), local navigation, content types to put in sections and paragraphs, etc., along with the functional elements needs to interact with users.

Other tools created at this time to facilitate the structure are wireframes, or annotated page layouts, because if is is a big site lots of people may be working on it and clear tools for communication are needed so that the site structure remains consistent.

Mock up screen shots and paper prototypes may be created and sometimes in the case of talented visual designers, storyboards are created. Storyboards are sketches showing how a user could interact with a system, sometimes they take a task-base approach, so that users could complete a common task.

Depending on the size of a project, information architects will work with content strategists who will have asked all the questions in the last section (part 4) on content and/or usability consultants who will have spoken to lots of users (part 3) to get an understanding of their experiences, above and beyond their understanding of the labelling of information in order to answer questions such as:

  • Does the website have great usability which is measured by being: effective and efficient; easy to learn and remember; useful and safe?
  • How do we guide users to our key themes, messages, and recommended topics?
  • Is the content working hard enough for our users?

Sometimes, it may just be one person who does all of these roles and is responsible for answering all of these questions.

It takes time to create great structure, often it takes several iterations of these these steps, until it is time to go on to the next stage (part 6) to start sharing this beautiful content on social media.

[Part 6]

Web design (7): Evaluation

desktopetc

A collaborative medium, a place where we all meet and read and write.
Tim Berners-Lee

[Part 7 of 7 : 0) intro, 1) story, 2) pictures,  3) users, 4) content, 5) structure, 6) social media, 7) evaluation]

Even though evaluation is the final part of this series, it should not be left to the end of any software project. Ideally, evaluation should be used throughout the life cycle of a project in order to assess the design and user experience, and to test system functionality and whether it meets user requirements without creating unexpected results or confusion.

Expert analysis

Expert (or Theoretical) analysis uses a detailed description of the design, which doesn’t have to be implemented. This creates a model of the user’s activity and then analysis is performed on that model.

It is one way of assessing whether a design has good usability principles. It cannot guarantee anything but can hopefully flag up any design flaws before time and money gets spent on implementation.

Expert analysis is best used during the design phase and experts can assess systems using:

Heuristics which are rules of thumb and not true usability guidelines. Usability expert Jakob Nielson developed 10 usability heuristics in 1995 and they are still widely used and quoted today.  Design consultant, Ari Weissman says that heuristics are better than no testing at all, but to say that they can replace getting to know your users and understanding them just silly. Researchers at the University of Nebraska found that heuristic evaluation and user testing complement each other and are both needed.

Review-based evaluation uses principles from experimental psychology and human-computer interaction (HCI) literature to provide evaluation criteria such as menu design, command names, icons and memory attributes to support/refute design decisions. Reviews may even use style guidelines provided by big companies such as Microsoft and Apple.

Model-based evaluation uses a model to evaluate software. This model might be taken from HCI literature such as Stuart Card’s GOMS and Ben Shneiderman’s Eight golden rules of dialog design.

Cognitive walkthroughs are step-by-step inspections which concentrate on what the user is thinking whilst learning to use the system. Alas, it is the analysts who act as the user and try to imitate what the user is thinking. Walkthroughs can be used to help develop user personas.

However, the main criticism is that novice users are often forgotten about because analysts have lots of experience and their pretending to be users can introduce all sorts of bias into your system. The advantages of this approach is that areas which are unclear in the system design can be easily flagged up and fixed cheaply and earlier on in the life cycle.

Using your user: user testing

The most informative types of evaluation always take place with the user. This can happen in the laboratory or in the field. In the laboratory, usability consultants have a script, such as this one by usability expert Steve Krug. The usability consultant asks the user to either do whatever they are drawn to do, or to perform a specific task,such as buying a product on the site, whilst talking aloud. This thinking aloud protocol not only identifies what the problem is, but also why. The best thing about usability testing is that clients can hear a user saying something which may be obvious to the consultant but not to the client and which the client might not believe if the consultant just told them. Co-operative evaluation is a very similar technique to usability testing.

Outside the laboratory, you can follow the user about and shadow them in the workplace, to see how the user interacts with your software, or the current software that your new software will hopefully improve upon. This is ethnography and a way of learning about the context in which your users work. It can be very expensive and time consuming to hire ethnographers to go into users’ workplaces.

A cheap and cheerful way of reproducing this shadowing is to get the users to keep a diary or blog, known as a cultural probe.  They are quick and easy to put together using open-ended questions which encourage users to say all the things they might not say during a testing session.

Empirical evaluation

Another relatively cheap and cheerful method is to get your user group to fill out a questionnaire or a survey in order to get their feedback.

The questionnaire needs to be designed very carefully, following these instructions, otherwise you can end up with a lot of information, but nothing tangible. The main advantage is that you get your users opinions and you can measure user satisfaction quite easily.

The disadvantage is it that is hard to capture certain types of information in a questionnaire such as the frequency of a system error, or the time taken to complete a task.

Logging

Computers can collect statistics of use, to tackle the sorts of questions like time taken and frequency of system errors.  Web stats are a great way of seeing this sort of information as well as which pages are the most attractive and most useful to users.  Eye-tracking software and click captures are also useful ways of collecting data. However, care needs to be taken not to introduce any bias in the interpretation of this data.

Informal evaluation

Informal evaluation methods can be useful, in the design stage for example, but are better suited in the context of performing research as they do not always yield usable results which can be used to guide design.

Focus groups: This is when you get a group of users together and they discuss subjects led by a moderator. Focus groups can be useful. However, they can lead to users telling you what they think they want, rather than what they need. As this 2002 paper asks: Are focus groups a wealth of information or a waste of resources?

Controlled experiments test a hypothesis like this great example: College students (population) type (task) faster (measurement) using iPad’s keyboard (feature) than using Kindle’s keyboard, by identifying independent and dependent variables that you can collect data on after testing in a simulation of real world situations such as in a college where iPads and Kindles are used.

No matter how great your website or software system is, it can always be improved by some method of evaluation. There are many methods involving users and experts to make your system as good as it can be throughout the whole lifecycle of your website or your software. Evaluation is the only way to identify and correct those design flaws.

Web design (6): Sharing and caring on social media

 

desktopetc

A collaborative medium, a place where we all meet and read and write.
Tim Berners-Lee

[Part 6 of 7 : 0) intro, 1) story, 2) pictures,  3) users, 4) content, 5) structure, 6) social media, 7) evaluation]

Nowhere is Berners-Lee’s vision of the World Wide Web more true than on social media. We all have access to as many conversations as we want. We can instigate new conversation, listen to other people talking, and dip in and out of art, music, video, and other amazing creations.

Most of the articles on social media for web design is about content marketing and content marketing strategy, which is a way for businesses to raise their profiles and create brand awareness, generate new sales, new customers, and keep customers loyal.

The main way to do this is by creating targeted content which is valuable and useful to the user/customer who then trusts a company and is more likely to buy from them. Content marketing is big business, and getting bigger every year according to i-scoop.eu.

Moz.com has published a best practices for social media marketing saying that before businesses promote their products and news, they must also build relationships with their customers so that they feel like they are part of a community. Sharing different types of content, not just information about their products and promotions, is one way of starting new conversation and creating new experiences with customers to encourage a trustworthy feeling.

Newspapers like the FT let their customers to do some of their marketing by providing tweetable quotes throughout their articles which link back to the news item on their website. This is a great way of using all the best content on your website.

A hierarchy of social media?

The types of information we share on social media fit nicely into Maslow’s hierarchy of needs which I call Maslow’s hierarchy of social media.

Content marketers believe that the further down Maslow’s triangle you are, the more likely it is that you are fulfilling customers’ basic needs which may encourage customer loyalty. However, customer needs aside, the information type which is shared more than anything other on social media is surprising information in the form of stories, short videos, images. Apparently, we all seek that twist in the tale.

Alone together

Spiritual thinker Deepak Chopra believes we are connected and are raised up by social media. In contrast Sociologist Sherry Turkle feels that social media is changing us and not in a good way. Writers Jennifer Weiner and Jonathan Franzen both concur and believe that social media encourages the worst in us. Social media, of course, offers both experiences: enriching and depressing. It can be a feeding frenzy of attack but also an amazing way of augmenting humans with others’ talents and skills and knowledge.

Of course, the reality is that no one really knows how social media works, which is why companies spend billons each year trying to find better and faster ways of reaching their target market by tweeting, facebook, instagram and blogging.

A masterclass

One of the best brands online is OWN: The Oprah Winfrey Network. During Oprah Winfrey’s 25-year TV series, she created a community. Her message was: You are not alone, by which, Oprah tapped into one of our deepest needs – we all want to feel that we matter. We want to be included a community and to be heard in conversation. We want to feel connected, so that we can be open and participate in life with others.

Since ending her award winning show, Oprah and her network OWN have reached out to its audience via social media to give information and courses and communitas. They have given us all a masterclass in how these tools should be used to satisfy both the customer and the business, and they continue to go from strength to strength.

Social media is an exciting way of instantly connecting to your customers and creating community in order to direct people to your website. Done well you users will happily co-create alongside you on your website, enriching you in ways only Tim Berners-Lee had the vision to see.

[Part 7]

Web design (3): Getting to grips with your user’s experience

desktopetc

A collaborative medium, a place where we all meet and read and write.
Tim Berners-Lee

[[Part 3 of 7 : 0) intro, 1) story, 2) pictures, 3) users, 4) content, 5) structure, 6) social media, 7) evaluation]

In the 1970s, the waterfall model was enthusiastically embraced by software engineers to enable them to get a handle on designing big software systems, although its proposer Winston Royce had issues with his model and discussed how it could be improved in the very first paper. He even included some agile-like programming ideas.

The waterfall model, Ian Somerville, Software Engineering (1992)
The waterfall model drawn by Ian Somerville in his book Software Engineering,(1992)

The main problem with the waterfall model was that the testing phase was the first time users saw their proposed new system. This meant that once users had experienced it, they wanted to change the requirements to better reflect what they needed. This would either result in a redesign of delays and rising costs, or users being lumbered with a system that did not reflect their needs.

Technology may have moved on immeasurably since the ’70s, but human communication skills have remained pretty much the same and identifying requirements is as huge a challenge today as it was back in Royce’s time. This is because what users think they want, is often very different from what they actually need.

To try and manage this gap, there have been all sorts of waterfall model modifications and alternatives: iterative waterfall, exploratory programming, rapid prototyping, and agile programming to name but a few.

Each approach has tried to be more flexible and iterative in order to accommodate users and produce better usable systems. In 2001, the agile manifesto was declared, promising to deliver software regularly to meet the changing requirements of all the people involved who would work together to produce something good.

And, nowadays, a usability specification is included in the requirements phase of the software lifecycle under ISO, International Standards. This demonstrates the recognised need for a more user-centred design practice, which hopefully leads to focusing on how users want to use a system rather than forcing them to change their behaviour and adapt their working practice to a given system.

Designer Donald Norman invented the term user experience to: cover all aspects of the person’s experience with the system including industrial design graphics, the interface, the physical interaction and the manual.

Norman felt that the term usability, the assessment of how easy an interface is to use, was too narrow, and wanted to reflect how a user experienced the system rather than just defining usability goals as part of a user requirements specification.

However, usability and users are just one, albeit important, part of the equation. There are business managers and stakeholders and a whole host of socio-organisational issues in the culture of each business, which can make the design process a complex one, which is why good designers shouldn’t just solve the problem that is asked of them, as Norman says:

It’s almost always the wrong problem. Almost always when somebody comes to you with a problem, they’re really telling you the symptoms and the first and the most difficult part of design is to figure out what is really needed to get to the root of the issue and solve the correct problem.

– Interview at adaptivepath, (2010)

Each business has its own way, or culture, when designing software. Some companies employ user experience and interaction design consultants (the lovely pic below describes the distinction) – individuals or companies – and some businesses just leave it to their programmers or web designers who might either work on the front or back end, or both, depending on the size and complexity of the system needed, and funds available.

ux-ixd
Difference between user experience and interaction designer by Per Axbom

There is no exact science to design and often the boundaries are blurred between roles. The main goal is to solve the right problem and support your user. And so we must begin with research.

Qualitative and quantitative research

Most projects are dictated by time and money constraints. However, even if you only have access to five users in total, it is still better to talk to them rather than designing something without any user consultation. Designers can never anticipate how users will interpret and use their designs.

Quantitative research, such as giving users a questionnaire or capturing their clicks as they perform a specific task on a website, is a useful approach if you want to collect results which are statistically significant, which you can present to stakeholders.

However, even if you use a more qualitative approach such as one-to-one interviews, full of open-ended questions resulting in many different answers, be assured, patterns will emerge in order to guide you.  They always do.

If time is short, a quick way to gain insight into your users’ minds is by using one of my favourite approaches: the cultural probe. You give users a way to describe their tasks and thoughts and opinions whilst going about their business. This can take the form of a diary or an online blog, video, flickr account, whatever you think you might want to see and analyse.

The resulting data can be a most powerful way of demonstrating how users behave and work almost as well as having your user give an opinion in the lab, the other side of a two-way mirror, whilst your client/stakeholder is watching.

Human nature is endlessly fascinating and we have a nature empathy with one another. Thus, it makes sense that when we present all our facts, figures and qualitative patterns to the stakeholder, we shape them into easy to understand formats which echo our natural storytelling talents.  We may want to use some or all of the following:

User personas

Personas were informally developed by the father of Visual Basic Alan Cooper in the 1980s as a way to understand the mindset of the users who would use the software he was designing.

Personas are an essential part of goal-directed design. Each group of users researched is represented by a persona, which in turn is represented by a document. Several personas are not uncommon in a typical project. (Image: Gemma MacNaught)
Personas by Gemma MacNaught

They are a way of representing a particular audience segment, and generally have a group name: i.e., web manager. Added to this is responsibilities, age and education, and their goals, tasks and environment.  Pictures and quotes help, as they capture more easily, a person’s motivations, frustrations and the essence of who they are.

Once the personas are in place, we can hear some of their stories:

User Stories

User stories, are mainly used in agile programming environments and they shift the focus from the system design: Hey, this is a cool feature, to the actual user and what the user wants to be able to do with the proposed system whether a given feature is cool or not.

As an Industrial Facilities Manager, Cathy is responsible for maintaining production systems and sustainability, which includes keeping equipment functional. She needs quick access to maintenance information and parts supply for her facility’s entire inventory.”

Example of a user story from www.newfangled.com

As newfangled.com says a story’s details are collaboratively worked on over time by everyone involved so that the story becomes a promise and a way to hold a conversation with users.

In agile environments, stories are the smallest building blocks which can be all joined together to make sprints, epics, and versions.

In a user experience environment, instead user stories are extended to make scenarios and journeys:

User scenarios and user journeys

A user scenario expands upon your user stories by including more details about how a system might be interpreted, experienced, and used by each persona group.  Scenarios describe a user’s goal, specify any assumed knowledge, and outline details of the user’s interaction experience.

A use case expands on scenarios and creates a long list of steps, sometimes in a call and response approach between user and system, which a user might take in trying to get something done. It starts with how the user got there and steps through each user/system state until they have successfully achieved their goal or given up.

The focus of use cases is what a system needs to allow a user to do and so, use cases are used to define product features and requirements. The result is use case diagrams or user flows and some descriptive text, which illustrate and describe the sequence of user interactions.

This all feeds into the user requirements, so that finally, we have a rich understanding of who the users are, what the users need, the tasks they perform, and how they go about it.

Delivering deliverables

We have come a long way since the days of the waterfall model and system-based design. However, I still hear stories of users being asked to fill in a spreadsheet field or two with their requirements so the programming team can write an epic.  Or, I hear that users can’t request requirements and code changes because: That’s just how the code works. Argh!

User personas etc., as tangible as they are, are only methods. They are not the deliverables of a project. Their only purpose is to facilitate user understanding. And we may have repeat them over and over until everyone is happy.
Used correctly, these methods can give everyone a good experience including stakeholders and designers. How brilliant is that?

[Part 4: Web design: Being content with your content]

Web design (1): What’s the story?

cartoon desktop tablet phone

The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.
Tim Berners-Lee

[Part 1 of 7 : 0) intro, 1) story, 2) pictures,  3) users, 4) content, 5) structure, 6)  social media, 7) evaluation]

Tim Berners-Lee used this description to describe the Web, 25 years ago, on the first website of his newly created World Wide Web. In 2014, the world’s Internet users surpassed 3 billion or 43.6 percent of world population, inadvertently, creating digital culture. But Berners-Lee’s words are as relevant today as they were back then. The Web was always intended to give universal access to a large universe of documents.

Alongside documents, we have the Internet of Things with devices passing information to each other to create ambient atmospheres. And, we have the Internet (of people) which compresses time and space so we can communicate instantly all over the world regardless of time zone: To shop, to make money, to make friends.

Until recently, we would only do this via a website, but whether we are reading, or chatting, or creating art, our main means of communicating is using words. And so, whatever else we think a website is, or can be, a website is words on a page which communicate a message, a story, or instructions.

For a long time designers were very conscious of words and used the idea of a newspaper as to how a website should be designed. We had above the fold, headlines, and images to break up the text making lots of websites look like newspapers. We controlled the layout and told each browser exactly how to display our website design.

This worked well because humans like to recognise things, and can transfer their knowledge of  one thing (newspaper works like this) to another (ah very similar to a newspaper, this website works like this) as well as being storytellers who, whilst feeling happy with certain plots or layouts, like to be surprised and amazed. Apple calls this design approach discoverability, which recognises that we are always looking for the next thing.

Humans are motivated by needs and are constantly looking to satisfy them. This is reflected online by us getting interactive with our words and making services available: to buy books worldwide, get food delivered locally, or check our bank accounts, before moving onto the next thing.

So, it may seem that websites today look and feel very different to Berners-Lee first website. But, they aren’t. No matter what you offer on a website to captivate your users and to make your design shine, the fundamental purpose of your website is to communicate the content – information or a service – which we do using words.

All websites look the same

Web designer, Dave Ellis says that most websites are starting to look the same, especially those ones done by web design companies advertising their web design capabilities.

All websites look the same - Web Designer, Dave Ellis
All websites look the same – Web Designer, Dave Ellis

UX designer@timcaynes went so far as to collect some of these same looking home pages together.

When laid out side by side they do look, interestingly enough, very similar.

They are following, according to 99designs, one of the top trends of 2015, which is: make it big, others trends include circles in your design and animated storytelling.

But, trends come and go. Web developer Jeremy Keith reminds us in one of his great blog posts how JavaScript was quickly adopted for three primary use cases:

  1. Swapping out images when the user moused over a link.
  2. Doing really bad client-side form validation.
  3. Spawning pop-up windows.

Gah!

But, it is not just the trend of make it big which designers blame for the homogeneous nature of web pages. Many believe it is because of the mobile first design approach.

Usability guru, Jakob Nielson, in his mobile design course advises the designer to:

  • cut features: eliminate things that are not core to the mobile use case;
  • cut content: to reduce word count and defer secondary information;
  • enlarge interface elements: to accommodate the “fat finger” problem.

But it’s not just space! Theoretically, mobile-first web design accommodates the most difficult context first. By removing convenient user assumptions: strong connection, ajax support. You have to get users to achieve their goals quickly and easily, which sounds great, in theory. But, the above list causes you to design very differently for a mobile than for a desktop and gives you different experiences.

This realisation has led to adaptive web design (AWD) and responsive web design (RWD). Both approaches design for different devices (e.g., desktop and mobile) whilst maintaining similar experiences.

RWD relies on flexible and fluid grids, and AWD relies on predefined screen sizes. RWD might take more code and implementation strategies with the fluid grids, CSS, and flexible foundations, whilst AWD has a streamlined, layered approach, which utilizes scripting to assist with adapting to various devices and screen sizes.

In practice though, this has led to AWD providing several websites on one URL: one mobile and one desktop, etc.

Cutting the mustard: Progress enhancement

Designer and web standards advocate, @Zeldman, says that there are 18,796 distinct Android devices on the market, and this will only continue to increase as technology gets cheaper and more widely available.

How do you design for this?

The BBC ‘s responsive team came up with cutting the mustard, which is about testing a browser for its capabilities before serving up all of the scripts which are going to create website behaviour and better experiences. This is similar to what Zeldman and The Web Standards Project proposed too back in the day.

However, do we need to have the same experience? Even if we all use identical websites we are having different experiences anyway because we are embodied and we see the world through our own particular lense of experience. If we add a different device to the mix, what does that mean? Nothing much, if users can easily do what they came to do.

An escalator can never break – it can only become stairs. You would never see an “Escalator Temporarily Out Of Order” sign, just “Escalator Temporarily Stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.”

Chris Heilmann

Seamless experience

Last year, facebook commissioned a study which found out that 40% of adults switch between devices, often web and mobile, to complete a single task. Nilay Patel, says that the mobile web needs to get much better in his article: The mobile web sucks and perhaps this is why.

But as Raj Aggarwal in Wired Magazine, says we need to understand what actions are best suited to which device and platform, i.e., desktop or mobile, and make it as easy as possible for users to perform those actions.

Mobile phones contain all sorts of extra functionality such as GPS location, camera, which is why many companies have gone for straight to app  design instead of mobile web. This approach encourages users to switch devices depending on what they are doing. E.g., people use their Uber mobile app to find a cab, but are likely leave feedback on the Web.

Designers need to create a seamless experience between their web app and the mobile app which remembers where users left off. Modern sites such as Gmail, Facebook, Twitter, Yelp and Mint.com all do this as well as updating themselves which makes users feel secure. For, Aaron Gustafson has proof that we don’t control our web pages, because big companies are serving up ads and putting extra html and css into webpages as they deliver them.

Gustafson says that there is no way of controlling this, but says that we need to make the content we serve as good as possible in order for users to still achieve their goals,when some resources are missing or markup is altered. This is much easier to do with an app.

Great guidelines exist for producing accessible mobile apps, particularly clutter free logical text which can be read out by a screen reader. One lovely example this site gives is the Met Office’s Weather App. When someone uses the Met Office’s app, they want to know what the weather is going to be like today. They don’t need to see the sunshine and showers. Words which contain a description of the weather is enough:

Today twenty January two thousand and twelve (heading, screen reader identifies the text as a heading)
Cloudy with light rain eight degrees centigrade
Wind westerly eleven
sunrise seven fifty five
sunset sixteen twenty eight

-Reading the Met Office Weather App, One Voice

Job done!

All a website needs to do is to give users the information for which they came.

If we compare this to Berners-Lee’s very first website, or get a screen reader to read Berners-Lee’s text for us, we may find that the experiences are very similar.

Content is key. If we design for content, we continue to give universal access to a large universe of documents and services and information, which, after all, is what the Web is all about.

[Part 2: Web design: Get the picture]