Skip navigation
Help

Jakob Nielsen

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.
Original author: 
Thomas Joos

  

As a mobile UI or UX designer, you probably remember the launch of Apple’s first iPhone as if it was yesterday. Among other things, it introduced a completely touchscreen-centered interaction to a individual’s most private and personal device. It was a game-changer.

Today, kids grow up with touchscreen experiences like it’s the most natural thing. Parents are amazed by how fast their children understand how a tablet or smartphone works. This shows that touch and gesture interactions have a lot of potential to make mobile experiences easier and more fun to use.

Challenging Bars And Buttons

The introduction of “Human Interface Guidelines” and Apple’s App Review Board had a great impact on the quality of mobile applications. It helped a lot of designers and developers understand the core mobile UI elements and interactions. One of Apple’s popular suggestions, for instance, is to use UITabBar and UINavigationBar components — a guideline that many of us have followed, including me.

In fact, if you can honestly say that the first iPhone application you designed didn’t have any top or bottom bar elements, get in touch and send over a screenshot. I will buy you a beer and gladly tweet that you were ahead of your time.

My issue with the top and bottom bars is that they fill almost 20% of the screen. When designing for a tiny canvas, we should use every available pixel to focus on the content. In the end, that’s what really matters.

In this innovative industry, mobile designers need some time to explore how to design more creative and original interfaces. Add to that Apple’s frustrating rejection of apps that “think outside the box,” it is no surprise that experimental UI and UX designs such as Clear and Rise took a while to see the light of day. But they are here now. And while they might be quite extreme and focused on high-brow users and early adopters, they show us the great creative potential of gesture-driven interfaces.

Rise and Clear
Pulling to refresh feels very intuitive.

The Power Of Gesture-Driven Interfaces

For over two years now, I’ve been exploring the ways in which gestures add value to the user experience of a mobile application. The most important criterion for me is that these interactions feel very intuitive. This is why creative interactions such as Loren Brichter’s “Pull to Refresh” have become a standard in no time. Brichter’s interaction, introduced in Tweetie for iPhone, feels so intuitive that countless list-based applications suddenly adopted the gesture upon its appearance.

Removing UI Clutter

A great way to start designing a more gesture-driven interface is to use your main screen only as a viewport to the main content. Don’t feel obliged to make important navigation always visible on the main screen. Rather, consider giving it a place of its own. Speaking in terms of a virtual 2-D or 3-D environment, you could design the navigation somewhere next to, below, behind, in front of, above or hidden on top of the main view. A dragging or swiping gesture is a great way to lead the user to this UI element. It’s up to you to define and design the app.

What I like about Facebook and Gmail on iOS, for instance, is their implementation of a “side-swiping” menu. This trending UI concept is very easy to use. Users swipe the viewport to the right to reveal navigation elements. Not only does this make the app very content-focused, but accessing any section of the application takes only two to three touch interactions. A lot of apps do far worse than that!

Sideswipe Menu
Facebook and Gmail’s side-swiping menu

In addition to the UI navigation, your app probably also supports contextual interactions, too. Adding the same two or three buttons below every content item will certainly clutter the UI! While buttons might seem to be useful triggers, gestures have great potential to make interaction with content more intuitive and fun. Don’t hesitate to integrate simple gestures such as tapping, double-tapping and tapping-and-holding to trigger important interactions. Instagram supports a simple double-tap to perform one of its key features, liking and unliking a content item. I would not be surprised to see other apps integrate this shortcut in the near future.

An Interface That Fits

When designing an innovative mobile product, predicting user behavior can be very difficult. When we worked with Belgium’s Public Radio, my team really struggled with the UI balance between music visualization and real-time news. The sheer number of contextual scenarios and preferences made it very hard to come up with the perfect UI. So, we decided to integrate a simple dragging gesture to enable users to adjust the balance themselves.

Radio+
By dragging, users can balance music-related content and live news.

This gesture adds a creative contextual dimension to the application. The dragging gesture does not take the user from one section (news or music) to another. Rather, it enables the user to focus on the type of content they are most interested in, without missing out on the other.

Think in Terms of Time, Dimension and Animation

What action is triggered when the user taps an item? And how do you visualize that it has actually happened? How fast does a particular UI element animate into the viewport? Does it automatically go off-screen after five seconds of no interaction?

The rise of touch and gesture-driven devices dramatically changes the way we design interaction. Instead of thinking in terms of screens and pages, we are thinking more in terms of time, dimension and animation. You’ve probably noticed that fine-tuning user interactions and demonstrating them to colleagues and clients with static wireframe screenshots is not easy. You don’t fully see, understand and feel what will happen when you touch, hold, drag and swipe items.

Certain prototyping tools, including Pop and Invision, can help bring wireframes to life. They are very useful for testing an application’s flow and for pinpointing where and when a user might get stuck. Your application has a lot more going on than simple back-and-forth navigation, so you need to detect interface bugs and potential sources of confusion as soon as possible. You wouldn’t want your development team to point them out to you now, would you?

InvisionApp
Invision enables you to import and link your digital wireframes.

To be more innovative and experimental, get together with your client first and explain that a traditional wireframe is not the UX deliverable that they need. Show the value of interactive wireframes and encourage them to include this in the process. It might increase the timeline and budget, but if they are expecting you to go the extra mile, it shouldn’t be a problem.

I even offer to produce a conceptual interface video for my clients as well, because once they’ve worked with the interactive wireframes and sorted out the details, my clients will often need something sexier to present to their internal stakeholders.

The Learning Curve

When designing gesture-based interactions, be aware that every time you remove UI clutter, the application’s learning curve goes up. Without visual cues, users could get confused about how to interact with the application. A bit of exploration is no problem, but users should know where to begin. Many apps show a UI walkthrough when first launched, and I agree with Max Rudberg that walkthroughs should explain only the most important interactions. Don’t explain everything at once. If it’s too explicit and long, users will skip it.

Why not challenge yourself and gradually introduce creative UI hints as the user uses the application? This pattern is often referred to as progressive disclosure and is a great way to show only the information that is relevant to the user’s current activity. YouTube’s Capture application, for instance, tells the user to rotate the device to landscape orientation just as the user is about to open the camera for the first time.

Visual Hints
Fight the learning curve with a UI walkthrough and/or visual hints.

Adding visual cues to the UI is not the only option. In the Sparrow app, the search bar appears for a few seconds, before animating upwards and going off screen, a subtle way to say that it’s waiting to be pulled down.

Stop Talking, Start Making

The iPhone ushered in a revolution in interactive communication. Only five years later, touchscreen devices are all around us, and interaction designers are redefining the ways people use digital content.

We need to explore and understand the potential of touch and gesture-based interfaces and start thinking more in terms of time, dimension and animation. As demonstrated by several innovative applications, gestures are a great way to make an app more content-focused, original and fun. And many gesture-based interactions that seem too experimental at first come to be seen as very intuitive.

For a complete overview of the opportunities for gestures on all major mobile platforms, check out Luke Wroblewski’s “Touch Gesture Reference Overview.” I hope you’re inspired to explore gesture-based interaction and intensify your adventures in mobile interfaces. Don’t be afraid to go the extra mile. With interactive wireframes, you can iterate your way to the best possible experience. So, let’s stop talking and start making.

(al)

© Thomas Joos for Smashing Magazine, 2013.

0
Your rating: None

  

Editor’s note: Welcome to a new column in the UX Design section on Smashing Magazine! Each month we’ll pick a handful of popular questions asked by our readers around good practices in designing smart and usable experiences. They will be answered by Christian Holst, a regular author here on Smashing and founder of Baymard Institute. Prior to co-founding Baymard Institute in 2009, he worked as a usability engineer in the hearing aid, credit card and consulting industries.

Adaptive Layout Vs. Responsive Layout

In which kinds of sites/projects is it better to use an adaptive layout (fixed break points)? In which kinds of sites is it better to use a responsive layout (fluid grids)?

A responsive layout[1] is in theory always better than an adaptive layout, but in some cases an adaptive layout is a more pragmatic solution.

An adaptive layout will give you more control over the design because you only have a handful of states to consider. In a responsive layout you easily have hundreds of states — sure, most of them with very minor differences, but they are different nonetheless — which makes it harder to know exactly how your design will look. This makes a responsive layout more difficult to test and predict with absolute certainty. That said, this is also the beauty of a responsive layout. By allowing some uncertainty on a superficial level, you gain certainty on more fundamental levels. Sure, you can’t predict with pixel-perfection how the design will work in a 943 × 684 pixel viewport, but you can rest assured that it works well — that the fundamental features and layout structures are meaningfully deployed.

An adaptive layout has its merits because it can be a more pragmatic solution that is cheaper to implement and easier to test. An adaptive layout can be considered the cheaper sibling of a responsive layout and can thus be appealing if resources are tight. This is especially true when dealing with an existing website, where a complete rewrite is not always feasible. In such cases, an adaptive layout can be a good (and more manageable) start. Dan Cederholm argues this case well in his article “Adapted”.


Image source: Trent Walton.

One argument often brought up in favor of an adaptive layout when compared to a responsive layout is that of typography — in particular better control over line lengths and avoiding orphaned header text. Trent Walton has jotted down some good thoughts on the matter. In essence, by changing font sizes (this is easy when using em), you can ensure readable line lengths (50-75 characters per line) in your responsive layout. This leaves the issue of potentially orphaning header text. While one may argue that this is the nature of the web, there are cases where seeking maximum control over a page headline makes sense. In these cases, using a plugin like FitText comes to our rescue, allowing us to avoid orphans.

[1] The definitions of responsive design and adaptive design are manyfold. Jeffrey Zeldman argues that restricting the term responsive design to a technological approach may prove too limiting and that the overall goal is device agnosticism, and we should thus include fixed breakpoint designs in our definition of responsive (web) design. Moreover, Aaron Gustafson defines adaptive design as “creating interfaces that adapt to the user’s capabilities (in terms of both form and function)” with responsive design as a subset meaning “fluid grids, fluid images/media & media queries.” In this answer I’ve intentionally limited the scope of discussion to layout, hence the use of responsive layout and adaptive layout. The definitions presented in the question are used throughout the answer, namely that responsive layout equals fluid grids, and adaptive layout equals fixed breakpoints.

User Interface (UI) Consistency Across Devices Vs. Device-Specific UI Conventions

In designing a product that will span various devices (i.e. Netflix or Pandora), what’s more important: consistency of the brand and UI, or designing to appropriately follow the guidelines of that specific device (i.e. designing a common experience on the iPhone, Android, television, Xbox)?

There are three important factors you need to consider: your focus (as a business), how familiar your users are with your UI, and how different your UI and functionality are on different platforms.

  1. Focus: There may be branding reasons to keep a consistent UI across your platforms, perhaps especially for lesser-known brands that are still fighting to establish an identity in the minds of their customers. However, users are typically more familiar with the device-specific UI conventions than those of a brand. Jakob Nielsen often states, “Users spend most of their time on other sites,” and while we’re not just talking about websites here, it is much the same principle (on a smartphone, simply replace “sites” with “apps”).
  2. Familiarity: Are most of your users spending hours a day using your service? Have they used it for a long time? Or are the majority of your users infrequent or newly acquired? Let’s say you have a business or productivity service and you know the majority of your users spend lots of time in it all year long. In this case, familiarity across the applications trumps device UI conventions, because the user has invested a significant amount of time learning your unique UI. On the other hand, if users haven’t spend that much time with your services and haven’t built strong cognitive and emotional ties to your designs and features, then device-specific UI conventions will generally result in better usability.
  3. Functionality: This has two aspects: a) Is your service only solving a single problem with a single feature, or is it more advanced? and b) Is there a difference in functionality and features across the various devices? If the features you offer on different platforms vary greatly, then adhere to device UI conventions, since cross-platform consistency will yield little benefit in terms of usability (using the same branding and general aesthetic design won’t help the user if the features are widely different — in fact, they could potentially cause harm as the user will think there’s overlap when in fact there isn’t). On the other hand, if you’re solving a single, simple problem, then diverging from device UI conventions is okay since users will very quickly learn your unique UI and you’ll potentially be able to solve the UI problems specific to your feature more readily than the generic device conventions afford.

In short: sticking to device-specific UI conventions where appropriate is a good, if slightly simplistic, rule of thumb.

Balancing Usability Research With Unique And Creative Concepts

How should I balance research, user feedback and usability testing with personal experience, instinct and trying to create a creative, unique, compelling experience? Basically, how much should users influence or guide the solution I am designing? It is “user” experience after all :)

The concept of your product, service, app or website is at the core of your user experience. It’s where you differentiate yourself from the competition and where you create true value to the customer. So develop your concept as creatively as possible and make it as original as possible. Then, when it comes to the real-life implementation, read up on user research, study UI conventions and perform usability testing as much as your concept allows.

Usability research and testing are what make your services easier and more seamless to use (which are truly important qualities in a competitive landscape), but they are not the reason people choose to use a service in the first place — they do that to solve a problem or fulfill a need. So first come up with that ingenious new concept, and then draw heavily on user research when implementing the service.

Usability tools are there to test and validate your designs, allowing you to continuously iterate your design based on user behavior and perceptions — an optimization process that should continue throughout the product’s life cycle.

Optimal Positioning Of Form Field Labels

What’s the best way to position form labels for an input field? Above the field, to the left, to the right? What about inline labels?

In short: for most input forms found on the web, such as contact forms, account creation and e-commerce, optimal form usability would be to place the label above the form field. Matteo Penzo’s eye tracking test on form label placement from 2006 confirms this.

On mobile devices the placing the label above the form field will ensure maximum width for the user input.
On mobile devices, placing the label above the form field will ensure maximum width for the user input. To the left you see Macy’s mobile checkout, where placing the label next to the form field results in a field so narrow the test subject couldn’t see the typo in his e-mail address. To the right you see an example of the recommended approach with the label above the form field.

Placing the label above the field is even more important if the form will also be accessed on mobile devices in portrait mode, due to the narrow screen. The user might otherwise have to deal with form fields that aren’t long enough to display the entire input, or end up doing a lot of sideways scrolling and panning between label and field. However, the exact opposite may be true of landscape mode, where the miniscule height of the viewport may be eaten up by the touch keyboard, potentially pushing the active field’s label out of sight.

An exception to placing the label above the field is for long forms that have very frequent and repeat usage, where the user needs to be able to quickly identify a few specific fields in a long list. In such cases, having the labels to the left of the form field makes it easier to scan. The same would go for a pre-filled form where the user needs to edit only a specific set of fields (e.g. when editing account profile information).

An example of inline labels, where the label acts as placeholder text in the form field.
An example of inline labels, where the label acts as placeholder text in the form field.

Inline labels, where the label is placed inside the form field as placeholder text, are horrible from a usability perspective. During our e-commerce checkout usability study, we saw numerous test subjects have serious issues with inline labels in Apple’s checkout process. While the approach makes for a simple visual appearance, the form is very difficult to interact with because each field loses its context the second the user starts typing. In the study, this not only made it more difficult for the subjects to fill out the form fields, it also made it very difficult for them to correct validation errors since the labels were missing.

Note that the importance of optimal positioning of the form field labels (and form field usability in general) are of course closely related to how many form fields the user has to fill in, and how often the user will need to complete the form. If it’s a single-field, single-use newsletter sign-up form, then choose whichever approach and design fits best with your overall layout. (Even inline labels would be acceptable in such a case.) But as soon as you have more than a handful of fields — e.g. a checkout process or a sign-up form that requires an address — I’d strongly recommend that you reduce friction as much as possible by following common form field usability guidelines, such as positioning the labels above the form field.

Any Questions?

If you have any questions that you would like me to tackle for a future Usability Q&A column here on Smashing Magazine, please ask them in the comments below!

(cp) (jc)

© Christian Holst for Smashing Magazine, 2012.

0
Your rating: None

  

Mobile users and mobile usage are growing. With more users doing more on mobile, the spotlight is on how to improve the individual elements that together create the mobile user experience.

The mobile user experience encompasses the user’s perceptions and feelings before, during and after their interaction with your mobile presence — be it through a browser or an app — using a mobile device that could lie anywhere on the continuum from low-end feature phone to high-definition tablet.

Creating mobile user experiences that delight users forces us to rethink a lot of what we have taken for granted so far with desktop design. It is complicated in part by mobile-specific considerations that go hand in hand with small screens, wide variations in device features, constraints in usage and connectivity, and the hard-to-identify-but-ever-changing mobile context.

Dissecting the mobile user experience into its key components gives us a conceptual framework for building and evaluating good mobile experiences, within the context of a user-centered approach to designing for mobile. These components shape the mobile user experience — including functionality, context, user input, content and marketing, among others.

The elements of mobile user experience

The relevance of these elements will change depending on the type of device (feature phone versus smartphone versus tablet) and the presentation interface (app versus Web). This article briefly describes each of these elements and elaborates on each with selected guidelines.

Functionality

This has to do with tools and features that enable users to complete tasks and achieve their goals.

Guidelines

  • Prioritize and present core features from other channels that have especial relevance in a mobile environment. For an airline, this includes flight statuses and flight check-ins. For cosmetic chain Sephora, it includes supporting in-store shopping via easy access to product reviews on mobile devices.
  • Offer relevant mobile-only functionality (like barcode scanning and image recognition), and enhance functionality using the capabilities of mobile devices where possible to engage and delight users. Old Navy’s app serves up surprise games or savings when users snap the logo in a store.
  • Ensure that fundamental features and content are optimized for mobile. For example, make sure the store locator shows the nearest stores based on the device’s location, and make the phone numbers click-to-call.
  • Include features that are relevant to the business category. For retail websites and apps, this would include product search, order status and shopping cart.
  • Offer key capabilities across all channels. Users who sign in should see their personalized settings, irrespective of the device or channel being used. If certain functionality is not offered on mobile, then direct users to the appropriate channel, as TripIt does to set up a personal network.

    TripIt directs users to the website for setting up a network

Additional Reading

Information Architecture

This has to do with arranging the functionality and content into a logical structure to help users find information and complete tasks. This includes navigation, search and labeling.

Guidelines

  • Present links to the main features and content on the landing page, prioritized according to the user’s needs. Mobile Design Pattern Gallery has examples of primary and secondary navigation patterns for mobile, many of which are vertical instead of horizontal as on desktop websites.
  • Enable mobile users to navigate to the most important content and functionality in as few taps or key presses as possible. Navigation optimized for small screens is usually broad and shallow instead of deep. While three clicks (or taps) is not the magic number, users need to be able to recognize that each tap is helping them complete their task. Every additional level also means more taps, more waiting for a page to load and more bandwidth consumed.
  • Address the navigation needs of both touchscreen and non-touchscreen users. When designing for touch, make sure the tap size of the navigation item is at least 30 pixels wide or tall. Provide keypad shortcuts for feature phones, so that users can enter, say, a number (0 to 9) to quickly access a link:

    Cater to feature phone users, as CNN does with access keys, not as Delta does by making the first action to be nine key presses downs
    Cater to feature phone users, as CNN does with access keys (left), not as Delta does by making the first action to be nine key presses downs (middle and right).

  • Provide navigational cues to let users know where they are, how to get back and how to jump back to the start. Mobile breadcrumbs are often implemented by replacing the “Back” button with a label showing users the section or category that they came from. For mobile websites, use standard conventions, such as a home icon that links back to the start screen, especially when navigation is not repeated on every screen.
  • Use concise, clear, consistent and descriptive labels for navigation items and links. While always a good practice, it becomes even more important on tiny mobile devices.

Additional Reading

Content

Otherwise known as “the stuff on your website” (as Lou Rosenfeld and Peter Morville refer to it in Information Architecture for the World Wide Web), content is the various types of material in different formats, such as text, images and video, that provide information to the user.

Guidelines

  • Present an appropriate and balanced mix of content to users (product information, social content, instructional and support content, marketing content).
  • Use multimedia when it supports the user’s tasks in a mobile context, adds value to the content or supports the goals of the website. Most of the time, multimedia content is best provided when the user is looking for distraction or entertainment (such as news or funny clips) or when it has instructional value (for example, how to use an app or new feature).
  • Always give the user control over multimedia content by not auto-starting video or sound, by allowing the user to skip or stop multimedia content and by being mindful of the bandwidth it takes up.
  • Ensure that content is mobile appropriate. Just as we had chunking guidelines when going from print to Web, copy should be written for shorter attention spans on mobile devices. Optimize images and media for the device; this means scaling down for smaller devices and making sure images are sharp enough for the new iPad.
  • Ensure that primary content is presented in a format supported on the target device. Even now, websites such as Volkswagen’s ask iOS users to download Flash.

    VW asks iPad users to download an unsupported Flash plugin

Additional Reading

Design

This has to do with the visual presentation and interactive experience of mobile, including graphic design, branding and layout.

Guidelines

  • Remember the sayings “Mobilize, don’t miniaturize” (popularized by Barbara Ballard) and “Don’t shrink, rethink” (of Nokia). Both make the point that mobile design should not just rehash the desktop design.
  • Design for glanceability and quick scanning. Glanceability refers to how quickly and easily the visual design conveys information.
  • Maintain visual consistency with other touchpoints and experiences (mobile, app, Web, print and real world) through the use of color, typography and personality. Identifying Amazon in the stack below is easy even though the brand name is not visible.

    Amazon's visual design is easily recognizable

  • Guide users from the initial and most prominent element of the design to other elements to help them complete their tasks. This is known as visual flow. A good design brings together visual elements as well as information architecture, content and functionality to convey the brand’s identity and guide the user.
  • Consider both portrait and landscape orientations in the design process. Devices increasingly support multiple orientations and automatically adjust to match their physical orientation. Maintain the user’s location on the page when they change orientation. Indicate additional or different functionality in the new orientation if applicable, as shown by ING:

    The ING app informs users about additional features in the landscape mode

Additional Reading

User Input

This has to do with the effort required to enter data, which should be minimized on mobile devices and not require the use of both hands.

Guidelines

  • Limit input to essential fields. Or, as Luke Wroblewski says in his book Mobile First, “When it comes to mobile forms, be brutally efficient and trim, trim, trim.” Limit registration forms to the minimum fields required, and use shorter alternatives where possible, such as a ZIP code instead of city and state. My favorite offender of this guideline is Volkswagen’s form to schedule a test drive; the mobile form has more required fields than the desktop version (the extra fields are highlighted below):

    Volkswagen's mobile form to schedule a test drive is more tedious than the desktop version

  • Display default values wherever possible. This could be the last item selected by the user (such as an airport or train station) or the most frequently selected item (such as today’s date when checking a flight’s status):

    United and NJ Transit use defaults to simplify user input

  • Offer alternate input mechanisms based on the device’s capabilities where possible. Apps take advantage of quite a few input mechanisms built into devices, including motion, camera, gyroscope and voice, but mobile websites are just starting to use some of these features, particularly geolocation.
  • Use the appropriate input mechanism and display the appropriate touch keyboard to save users from having to navigate their keyboard screens to enter data. Keep in mind that inputting data is more tedious on feature phones that have only a numeric keypad. For non-sensitive applications, allow users to stay signed in on their mobile device; and save information such as email address and user name because mobile phones tend to be personal devices, unlike tablets, which tend to be shared between multiple people.

    Use appropriate keyboard; examples from the iOS Developer Library

  • Consider offering auto-completion, spellcheck suggestions and prediction technology to reduce the effort required to input data and to reduce errors — with the ability to revert as needed. Disable features such as CAPTCHA where not appropriate.

Additional Reading

Mobile Context

A mobile device can be used at anytime, anywhere. The mobile context is about the environment and circumstances of usage — anything that affects the interaction between the user and the interface, which is especially important for mobile because the context can change constantly and rapidly. While we often focus on distractions, multitasking, motion, low lighting conditions and poor connectivity, it also includes the other extreme — think using a tablet in a relaxed setting over a fast Wi-Fi connection.

 The Context of Mobile Interaction
The Context of Mobile Interaction,” Nadav Savio

Guidelines

  • Use device features and capabilities to anticipate and support the user’s context of use. The iCookbook app allows users to walk through a recipe using voice commands — a nice feature when your hands are covered in batter!
  • Accommodate for changes in context based on the time of day and when the user is using the app. The Navfree GPS app automatically switches from day to night mode, showing low-glare maps for safer nighttime driving.

    GPS app sensing context

  • Use location to identify where the user is and to display relevant nearby content and offers. A Google search for “movies” on a mobile device brings up movies playing nearby and that day’s showtimes, with links to buy tickets online if available.
  • Leverage information that the user has provided, and respect their preferences and settings. After the first leg of a multi-leg flight, TripIt showed me the flight and gate information for my next flight, as well as how much time I had to kill. United’s app did no such thing, even though it knew much more about me. It could have shown me how to get from my current plane to the connecting flight and highlighted the location of the United Club along the way, where I could comfortably spend my two-hour wait, since it knew I was a member.
  • Default to the user experience most appropriate for the device (i.e. a mobile experience for small screens, and perhaps a desktop-like experience for tablets), but give users the option to have enhanced features. A big discussion on how to present this to the user recently took place, with Jakob Nielsen recommending a separate mobile website and Josh Clark arguing instead for a responsive design; yet others believe that Nielsen and Clark are both wrong.

Additional Reading

Usability

This is the overall measure of how well the information architecture, design, content and other elements work together to enable users to accomplish their goals.

Guidelines

  • Make it clear to the user what can be selected, tapped or swiped (this is known as affordance), especially on touchscreen devices. One of the big findings of Nielsen Norman Group’s usability studies of the iPad was that users didn’t know what was touchable or tappable. Another issue was swipe ambiguity: when the same swipe gesture means different things in different areas of a screen. Ensure that touchability is clear and that items such as links, icons and buttons are visibly tappable.
  • For touchscreen devices, ensure that touch targets are appropriately sized and well spaced to avoid selection errors. Also, place touch targets in the appropriate screen zones; for example, put destructive actions such as those for deletion in the “Reach” zone, as shown by Luke Wroblewski in his book Mobile First:

    Zones showing ease of access for right handed touch-screen use from Mobile First

  • Follow conventions and patterns to reduce the learning curve for users and to make the mobile experience more intuitive. Dedicated apps should follow platform-specific standards and guidelines. A comprehensive collection of links to official UI and UX guidelines is available in the article “UI Guidelines for Mobile and Tablet Web App Design” on Breaking the Mobile Web.
  • Ensure usability in variable conditions, including for daylight glare and changed angle of viewing and orientation, by paying attention to design elements like contrast, color, typography and font size.
  • Do not rely on technology that is not universally supported by your audience’s devices, including Java, JavaScript, cookies, Flash, frames, pop-ups and auto-refreshing. When opening new windows or transitioning from an app to the browser, warn users to avoid overwriting already open tabs.

Additional Reading

Trustworthiness

This relates to the level of confidence, trust and comfort that users feel when using a mobile website or app. According to a 2011 study by Truste and Harris Interactive, privacy and security are the top two concerns among smartphone users:

Privacy and security are the top two concerns among smartphone users

Guidelines

  • Do not collect or use personal information (such as location and contact list) from mobile devices without the explicit permission of the user. The first few months of this year have seen numerous reports of apps secretly copying smartphone address books, with watchdogs up in arms and users retaliating.
  • Make it easy for users to control how their personal information is shared in a mobile app by asking before collecting their location data and by allowing them to opt out of targeted advertising.
  • Clearly state your business practices (including for privacy, security and returns), and present them contextually (such as by displaying links to your privacy and security policies on the registration screen). The policies themselves should be accessible in a secondary section of the mobile user experience (such as the footer or a “More” tab). Reinforce credibility by displaying trusted badges, especially when users need to trust you with their personal or financial information.
  • Present policies appropriately on mobile devices by offering a concise summary and an option to email the entire policy. Privacy and security policies tend to be notoriously long and full of boring legalese that users often blindly click through to continue what they really want to do, so make it easy for users who are interested in the fine print.
  • Don’t break the user’s workflow when displaying legalese. Take them back to where they were before being interrupted, instead of making them start all over.

Additional Reading

Feedback

This has to do with the methods for attracting the user’s attention and displaying important information.

Guidelines

  • Minimize the number of alerts the app displays, and ensure that each alert offers critical information and useful choices. For a smile, look at Chris Crutchfield’s video on notification and alert overload.
  • Keep alerts brief and clear, explaining what caused the alert and what the user can do, along with clearly labeled buttons.
  • Notifications should be brief and informative, not interfere with anything the user is doing, and be easy to act on or dismiss.
  • Provide feedback and confirmation on screen without disrupting the user’s workflow.
  • If your app displays badges and status bar notifications, keep the badges updated and clear them only when the user has attended to the new information. Chase clears the notifications badge for its mobile app the moment the user visits the notification section, even before the user has seen which of their multiple accounts triggered the badge, forcing them to hunt through each account to see what triggered it.

Additional Reading

Help

This relates to the options, products and services that are available to assist the user in using the website or app.

Guidelines

  • Make it easy for users to access help and support options. Users commonly look for help in the footer of a mobile website and in the toolbar or tab bar of an app.
  • Offer multiple ways to get support, including options relevant in a mobile context, such as self-serve FAQs, live support via click-to-call, and near-real-time Direct Message tweets. Two financial service companies that actively offer support via Twitter are American Express and Citibank.
  • Present a quick introduction and short tutorial on using the app when it first launches, with options for the user to skip and view later.
  • When introducing new or unique functionality (such as when check depositing via mobile apps was first introduced), offer contextual help and tips to guide users the first time, and as a refresher for infrequently used functionality.
  • Offer help videos when appropriate, but allow the user to start, pause, stop and control the volume as they wish, and keep in mind the multimedia guidelines mentioned in the “Content” section above.

Additional Reading

Social

This relates to content and features that create a sense of social participation, that enable user interaction and that facilitate sharing on established social networks.

Guidelines

  • Create and maintain a presence on social networks (for example, a Facebook page) and local services (for example, a profile page on services such as Google Places, Bing Business Portal and Yahoo Local). These will be highlighted in search results and on location-based social networking services. In addition to your business’ name, include your physical address, phone number, URL and hours of operation.
  • Incorporate your social presence and activity into your website’s mobile experience by showing your recent activity and offering an easy way to follow or like you on these networks.
  • Integrate social networking features into your website’s mobile experience to make it easy for users to connect with their own social networks. This could be as simple as using APIs to enable social sharing, bookmarking, tagging, liking and commenting.
  • Invite users to generate content featuring your brand, product or service from their mobile device, offering some incentive in return. For example, the burger chain Red Robin could invite the user to share a picture of their child reading a school book at one of its locations to get a free milkshake.
  • Provide mobile offers that can be shared and go viral. American Express currently offers savings and discounts to users who sync their profiles on networks such as Facebook, Twitter and Foursquare to their credit card.
  • Apps that rely on social contributions from users should look at ways to seed content in a way that is useful and, eventually, self-sustaining. For example, the My TSA app has a user-contributed feature that shows the wait times at security checkpoints, but it often shows outdated information, even though airport staff post physical signs of wait times at some airports.

Additional Reading

Marketing

This has to do with the methods by which a user finds a website or app and the factors that encourage repeated usage.

Guidelines

  • Ensure findability by optimizing for mobile search and discovery, such as by keeping URLs short. If you have a separate mobile website, follow URL naming conventions (m.site.com or mobile.site.com). In mobile search results, provide quick access to location-based content (e.g. directions from one’s current location) and device-formatted options (e.g. click to call).

    Mobile optimized formatted information for UPS, but partially missing for Fedex
    Mobile-formatted information is optimized for UPS (left), but partially missing for FedEx (right).

  • “Quick response” (QR) codes should lead to a mobile-optimized landing page, instead of a traditional page that requires zooming or, worse still, to the website’s home page, from where the user has to hunt for information. As a side note, QR codes painted on buildings should be big and clear enough to be recognized and deciphered by mobile devices.
  • Email campaigns should include a link to view the message in a mobile-friendly format, which itself links to the relevant offer page formatted for mobile — unlike CVS/pharmacy, which takes users to its mobile home page.
  • Promote your app in other channels where possible (TV, print and in-store advertising), and offer incentives to download and use the app, usually in the form of discounts and savings. If your app has a price tag, attract users to buy it in an overcrowded market by offering a limited-time promotional price. Another option is to promote the app through the Free App A Day marketplace.
  • Prompt users to rate and review your app or to share it on social networks after they have used it, but give them the option to postpone or stop these prompts. This will not only generate word of mouth, but give you insight into what users like and don’t like about the app. “Taking Control of Your Reviews” by smalltech discusses the strategy of encouraging happy customers to post reviews and unhappy customers to email you feedback.

Additional Reading

Conclusion

Mobile user experience is still a developing field, and opportunities for improvement continue to emerge. We’ve presented an overview of the key elements of the mobile user experience, along with some guidelines to get started in each. Focusing on these individual elements will help us create great overall mobile user experiences for our users.

(al)

© Lyndon Cerejo for Smashing Magazine, 2012.

0
Your rating: None

Make the logo smaller. Photo: Ariel Zambelich/Wired.com

Web usability guru Jakob Nielsen has come under fire for his latest suggestions on building mobile websites. Nielsen’s controversial advice can be distilled down to this nugget: “good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.”

Among the many negative responses to Nielsen’s latest Alertbox post is that of web developer and mobile specialist Josh Clarke, who calls Nielsen’s questionable advice “180-degrees backward.”

Indeed, much of Nielsen’s advice may seem like a shockingly bad idea not just to developers, but to anyone who uses a mobile device to browse the web.

This isn’t the first time Nielsen has taken a contrarian stand about mobile websites. Last year he suggested that a mobile-first approach to design was wrong because “PCs will remain important,” which is, at best, a false dilemma since a mobile-first design doesn’t mean ignoring the desktop. Just because you’re focused on the future doesn’t mean you’re ignoring the past.

Nielsen’s latest advice has similar false dichotomies. For example much of Nielsen’s advice rests on the premise that a single site cannot serve the wants and needs of both mobile and desktop users. In fact you don’t need to choose between mobile and desktop, the page can adapt and serve the needs of both users. There are plenty of examples of sites that do just that with responsive designs. To be sure there are plenty of websites that claim to be mobile-friendly and obviously aren’t. But that doesn’t mean the solution is to toss out the whole idea of responsive design and go back to separate websites for every device.

In fact what Nielsen considers one of the “main guidelines” for a successful mobile website is something that many people would probably consider the most irritating thing about mobile sites: “If mobile users arrive at your full site’s URL, auto-redirect them to your mobile site” (emphasis in original).

The problem with this advice is that, as Clark puts it, “Nielsen is confusing device context with user intent.” In other words, just because someone visits your site on a small screen doesn’t mean they won’t want access to all the same things they would see on a slightly larger screen. It may be necessary to rearrange elements for smaller screens, but hiding them is a bad idea.

“All that we can really know about mobile users is that they’re on a small screen, and we can’t divine user intent from that,” writes Clark.

Nielsen, however, does just that, divining that — because a user has a small screen — they will want to do less on your site. He suggests you serve up a limited site and then offer a link to the full site “for those (few) users who need special features that are found only on the full site.”

We suggest you don’t do that. You can do better than that.

You can use responsive design patterns to make sure that the same content is always available, but that the experience is tailored to the device at hand. In other words, responsive design means your site works just as well on mobile as it does on the desktop. If it doesn’t that means something is wrong with your site, not the whole approach. Sure, there will be times when a separate mobile site is the right way to go, but those times will likely be few and far between.

Nielsen’s argument is based on copious research and we have no doubt he found plenty of horribly designed websites that completely fail on mobile devices to justify his recommendations. But just because Nielsen is finding a lot of poorly made mobile websites does not, as Clark writes, “mean we should punt on creating great, full-featured mobile experiences.”

0
Your rating: None

What was Microsoft's original mission?

In 1975, Gates and Allen form a partnership called Microsoft. Like most startups, Microsoft begins small, but has a huge vision – a computer on every desktop and in every home.

The existential crisis facing Microsoft is that they achieved their mission years ago, at least as far as the developed world is concerned. When was the last time you saw a desktop or a home without a computer? 2001? 2005? We're long since past the point where Microsoft's original BHAG was met, and even exceeded. PCs are absolutely ubiquitous. When you wake up one day to discover that you've completely conquered the world … what comes next?

Apparently, the Post PC era.

Microsoft never seemed to recover from the shock of achieving their original 1975 goal. Or perhaps they thought that they hadn't quite achieved it, that there would always be some new frontier for PCs to conquer. But Steve Jobs certainly saw the Post PC era looming as far back as 1996:

The desktop computer industry is dead. Innovation has virtually ceased. Microsoft dominates with very little innovation. That's over. Apple lost. The desktop market has entered the dark ages, and it's going to be in the dark ages for the next 10 years, or certainly for the rest of this decade.

If I were running Apple, I would milk the Macintosh for all it's worth – and get busy on the next great thing. The PC wars are over. Done. Microsoft won a long time ago.

What's more, Jobs did something about it. Apple is arguably the biggest (and in terms of financials, now literally the biggest) enemy of general purpose computing with the iPhone and iPad. These days, their own general purpose Mac operating system, OS X, largely plays second fiddle to the iOS juggernaut powering the iPhone and iPad.

Here's why:

Apple-cumulative-sales

The slope of this graph is the whole story. The complicated general purpose computers are at the bottom, and the simpler specialized computers are at the top.

I'm incredibly conflicted, because as much as I love the do-anything computer …

  • I'm not sure that many people in the world truly need a general purpose computer that can do anything and install any kind of software. Simply meeting the core needs of browsing the web and email and maybe a few other basic things covers a lot of people.
  • I believe the kitchen-sink-itis baked into the general purpose computing foundations of PCs, Macs, and Unix make them fundamentally incompatible with our brave new Post PC world. Updates. Toolbars. Service Packs. Settings. Anti-virus. Filesystems. Control panels. All the stuff you hate when your Mom calls you for tech support? It's deeply embedded into of the culture and design of every single general purpose computer. Doing potentially "anything" comes at a steep cost in complexity.
  • Very, very small PCs – the kind you could fit in your pocket – are starting to have the same amount of computing grunt as a high end desktop PC of, say, 5 years ago. And that was plenty, even back then, for a relatively inefficient general purpose operating system.

But the primary wake up call, at least for me, is that the new iPad finally delivered an innovation that general purpose computing has been waiting on for thirty years: a truly high resolution display at a reasonable size and price. In 2007 I asked where all the high resolution displays were. Turns out, they're only on phones and tablets.

iPad 2 display vs iPad 3 display

That's why I didn't just buy the iPad 3 (sorry, The New iPad). I bought two of them. And I reserve the right to buy more!

iPad 3 reviews that complain "all they did was improve the display" are clueless bordering on stupidity. Tablets are pretty much by definition all display; nothing is more fundamental to the tablet experience than the quality of the display. These are the first iPads I've ever owned (and I'd argue, the first worth owning), and the display is as sublime as I always hoped it would be. The resolution and clarity are astounding, a joy to read on, and give me hope that one day we could potentially achieve near print resolution in computing. The new iPad screen is everything I've always wanted on my desktops and laptops for the last 5 years, but I could never get.

Don't take my word for it. Consider what screen reading pioneer, and inventor of ClearType, Bill Hills has to say about it:

The 3rd Generation iPad has a display resolution of 264ppi. And still retains a ten-hour battery life (9 hours with wireless on). Make no mistake. That much resolution is stunning. To see it on a mainstream device like the iPad - rather than a $13,000 exotic monitor - is truly amazing, and something I've been waiting more than a decade to see.

It will set a bar for future resolution that every other manufacturer of devices and PCs will have to jump.

And the display calibration experts at DisplayMate have the measurements and metrics to back these claims up, too:

… the new iPad’s picture quality, color accuracy, and gray scale are not only much better than any other Tablet or Smartphone, it’s also much better than most HDTVs, laptops, and monitors. In fact with some minor calibration tweaks the new iPad would qualify as a studio reference monitor.

Granted, this is happening on tiny 4" and 10" screens first due to sheer economics. It will take time for it to trickle up. I shudder to think what a 24 or 27 inch display using the same technology as the current iPad would cost right now. But until the iPhone and iPad, near as I can tell, nobody else was even trying to improve resolution on computer displays – even though all the existing HCI research tells us that higher resolution displays are a deep fundamental improvement in computing.

At the point where these simple, fixed function Post-PC era computing devices are not just "enough" computer for most folks, but also fundamentally innovating in computing as a whole … well, all I can say is bring on the post-PC era.

[advertisement] What's your next career move? Stack Overflow Careers has the best job listings from great companies, whether you're looking for opportunities at a startup or Fortune 500. You can search our job listings or create a profile and let employers find you.

0
Your rating: None

  

A few months ago I went to collect a friend from hospital. Arriving early, I entered the waiting room and noticed in-house magazines stacked by the door. I picked one up, grabbed a coffee and took a seat.

The magazine read like a very long press release, blabbering on about patient-centric care and employee awards. I was quickly bored, so I read from my phone instead. The magazine failed in its purpose.

Effective content marketing holds people’s attention. It gives you a distinctive brand, loyal fans and increased sales. You don’t need a big budget to succeed, which is why good content marketing is the single best way to beat bigger competitors online.

Content marketing used to be about customer magazines and mailed newsletters. Now it covers blogs, email newsletters, eBooks, white papers, articles, videos and more. In this article, you will learn about content marketing techniques that you can apply to your business.

Prepare

Before creating content, you need to prepare. Think about your tone and style, where to find the best writers and how to organize your workflow.

Tone and Style

Too many companies start writing content before their brand has a defined voice. This leads to inconsistency. It’s like using one logo in your brochure, another on your website and another on your blog.

When speaking with people, you see their expressions and you adjust your tone accordingly. In a meeting, when you see that someone is confused, you clarify meaning, simplify sentences and speak reassuringly. The Web offers no feedback until your content is published, and then it’s too late.

To get the right tone, think of the person who best represents your brand. The person could be fictional or real, and they may or may not work for you. Now think of adjectives that describe them. Once you know what you want, provide clear details and practical examples.

Let’s say you run a travel agency that markets to young independent travelers. You want your representative to sound experienced, helpful and friendly. Try using a table like the one below to delineate what your adjectives do and don’t mean:

Experienced
Helpful
Friendly

Does mean…
Knowledgeable
Write with authority, as though the knowledge was gained first hand.
Efficient
Explain things clearly and positively. Make sure all relevant information is obvious and accessible.
Personal
Use informal language, and write as though you are talking to one person, rather than a broad customer base.

Does not mean…
Condescending
You know a lot but don’t talk down to your customers. They probably know a lot too.
Pushy
Promote your company, but not at the expense of good service. Always have your reader’s wants in mind.
Unprofessional
Make sure there are no grammar or spelling mistakes. Proofread carefully.

You’ll also need a style guide, so that your authors write consistently. Should you use title case in headings? Are contractions appropriate? Check out The Yahoo! Style Guide for ideas.

Picking Content Creators

Don’t pick the wrong people to create your content. It’s hard for a non-technical person to pick the best Web developer, and it’s the same with content marketing. You need to know about content creation in order to judge other people’s abilities. Some people suggest making everyone in your company a content creator, but this is a bad idea. Not everyone can be a good accountant, secretary or rocket scientist, and the same applies here. To succeed, you should pick the best.

Ask everyone who wants to be a content creator to write a sample blog post. Then you can find the best few people. Some might not be able to write but have interesting ideas. In this case, you’ll need someone to edit their copy. Perhaps you want to raise the profile of a particular staff member. If they can’t write, have someone ghostwrite for them.

Workflow

Some companies have a simple workflow: one person does everything. The person researches, writes and publishes without any input from others. This model can work, but you’ll see more success with a workflow that enables other people to take part. Have different people write, edit and proofread. It’s a good way to catch mistakes and to bring more ideas into the process. Think about the best process for each type of content. One person might be enough for a tweet, whereas four to six people might be ideal for an eBook.

Imagine you’ve got a well-staffed company that is putting together a B2B white paper. You could organize your workflow like this:


An example of how to organize your workflow in a well-staffed company.

Persuade

Your content should be persuasive. Pay close attention to how you speak and what you say.

Use Simple Language

Take the question below on Yahoo! Answers. To “sound intelligent,” this person would like to know “big words that replace everyday small words.”

Big words that replace everyday small words?

Many people make this mistake. They use language that is unnecessarily complicated, usually to show off or to sound corporate and professional.

“Short words are best and the old words when short are best of all,” said Winston Churchill. So, don’t talk about “taking a holistic view of a company’s marketing strategy to deliver strategic insights, precise analysis and out-of-the-box thinking.”

Prefer “make” to “manufacture,” and “use” to “utilize.” While “quantitative easing” offers precision to economists, your personal finance audience would prefer “print money.”

Lauren Keating has studied the effect of scientific language on the persuasiveness of copy. She found that most people respond best to advertisements that contain no scientific language. People found them more readable and persuasive, and they felt more willing to buy the product. Lauren’s conclusion was clear: copy needs to be plain and simple.

Have Opinions

Interesting people have opinions, and interesting brands are the same. Look at the amazing work of new search engine DuckDuckGo. It has positioned itself as the antithesis of Google, launching websites that criticize how the search giant tracks you and puts you in a bubble. The strategy is paying off: DuckDuckGo is seeing explosive growth.

Duck Duck Go
DuckDuckGo is an alternative search engine that breaks you out of your Filter Bubble.

While this strategy is perfect for defeating a big incumbent, you don’t have to be openly hostile to your competitors. You can say what you think without mentioning their names.

Bear in mind that people are ideologically motivated. Brendan Nyhan and Jason Reifler’s study, “When Corrections Fail”, describes the “backfire effect” of trying to correct people’s deeply held beliefs. The authors found that contradicting people’s misconceptions actually strengthened those opinions. If people see you as an ideological ally (like a political party), they are more likely to agree with you on other issues — even ideologically inconsistent or non-ideological ones. You can use your opinions to attract people to your company: converting the agnostic or validating the views of allies.

As a small-scale brewer, for example, you might have a strong opinion on ale, believing in craft over mass production. You might think the market is dominated by big businesses that sacrifice quality for quantity. In this situation, you could use content marketing to talk about the best way to make beer. By stressing how seriously you take the development of your product, you communicate your opinion to those who share it without directly criticizing your competitors.

Think politically: consider the popularity of your views and whether they will attract media coverage. Ideally, your opinions should be bold and popular.

Sell the Benefits

In the same way that you sell your products and services, tell your audience the benefits of your content. This technique is essential if your audience doesn’t know what it wants.

PaperlessPipeline is a transaction management and document storage app for real estate brokers. Its founder, Dane Maxwell, had a creative idea to sell his product. The biggest problem for real estate brokers is recruiting. So, Dane invited them to a webinar titled “Recruiting Secrets of the 200-Plus Agent Office in Tennessee.” Brokers didn’t even know they needed to manage transactions, so he didn’t mention it in the invitation.


Paperless Pipeline takes your real estate transactions and related documents online—without changing how you work.

In the webinar, he introduced PaperlessPipeline and explained how it enables brokers to recruit more agents. The webinar attracted 120 guests, and “16 ended up buying at the end,” said Dane in an interview with Mixergy.

Imagine you run a company that develops technology for mobile phones, and you want to promote a new femtocell that boosts mobile reception in public spaces and rural areas. This technology could be valuable to people who want to improve mobile reception, but those people might not have heard of it.

So, instead of promoting the technology directly, offer content that focuses on the benefits. By using benefit-focused copy, you immediately tell the reader what’s in it for them.

Teach

Think about what your audience wants. People want to hear answers and to learn something new, so give them what they want.

Give Answers

Content marketing needs to offer practical advice that people can use. Readers have been trained to expect answers on the Web, and yet so much content fails to deliver.

Consider FeeFighters, a comparison website for credit card processing. One of its blog posts, Do You Know What Makes Up Your Credit Score?, talks about the factors that affect your credit score. Instead of offering abstract advice and concepts, the post provides practical tips for improving your credit score:

Area #2: Your Credit Utilization Ratio

The second largest determining factor in what makes up your score is the amount of credit that you have available to you in relationship to how much of that credit you’ve used. This accounts for 30 percent of your credit score. The optimal rate is 30 percent, which means that if you have $10,000 in credit available to you, you should only be using about $3,000 of it. One trap that some people fall into is believing that if they max out their credit cards every month and then pay them off at the end of the month, they’ll build their credit. But since that gives them a 100 percent credit utilization ratio, and that ratio accounts for 30 percent of their overall credit score, they’re really doing more harm than good.

Say or Do Something New

Most content is boring and unoriginal, which is good for you. It makes it easier to beat your competitors.

You can make your content interesting by doing something new, without necessarily saying something new. For instance, you could write a comprehensive article on a topic that has only piecemeal information scattered across the Web. Or you could use a different format for a topic that gets the same treatment; rather than writing the fiftieth blog post on a topic, shoot the first video.

You can also make your content interesting by saying something new. An infographic by Rate Rush compares the popularity of Digg to Reddit, creatively combining a bar graph and clock to present the data. Although Rate Rush is a personal finance website, with little connection to social news, its staff researched a topic they were interested in and drew attention by putting it to imaginative use.

Our agency also researches things that we find interesting, and this has been a great source of content. In 2010, we polled around 1000 iPad owners to find out how consumers use the device. It led to a slew of media attention.

You can do the same. Come up with an original idea to research, and then undertake a study. Also look into studies that your business has done in the past, because interesting stuff might be lying around. One of our clients looked through her company’s research archive and found amazing material. She didn’t spend any money on research but got a lot of great content, links and media coverage.

Captivate

Give your content more personality. Captivate your audience with stories and characters that will draw them in and keep them coming back.

Tell a Story

Telling a story is a great way to connect with readers. According to a number of studies summed up by Rob Gill of Swinburne University of Technology, telling stories can be useful in corporate communication. Storytelling is fundamental to human interaction, and it can make your content more compelling and your brand more engaging.

Citing Annette Simmons’ The Story Factor, Rob says this: “It is believed people receiving the narration often come to the same conclusion as the narrator, but through using their own decision-making processes.” Told through a story, a message becomes more personal and relevant. The reader is also more likely to remember what was said.

Rand Fishkin is the co-founder and CEO of SEOmoz. Instead of sharing only positive accounts of his business, he also writes about difficulties such as his failed attempt to raise capital:

Michelle was the first to note that something was “odd.” In a phone call with Neil, she heard him comment that they “needed to do more digging into the market.” In her opinion, this was very peculiar.… Tuesday morning we got the call; no deal.


An email shared by Rand Fishkin in his post about SEOmoz’s attempt to raise funding.

Brands need stories, and stories need people, suspense, conflicts and crises. By reading SEOmoz’s content, and seeing both the positive and negative, you become immersed in its story.

Ikea is another example of a brand that tells stories that generate opinions about its company. For instance, it plays up its Swedish roots and paints a romantic image of a wholesome and natural society. Its website is full of stories that contribute to this effect.

A survey conducted by the B2B Technology Marketing Community showed that around 82% of LinkedIn users found that telling a story through case studies was the most effective form of content marketing.

Sometimes you’ll want to use anecdotes to make a point, and sometimes you’ll write a post or tweet to build a narrative. When you’re cultivating a story, keep the information simple, and don’t be afraid to repeat points here and there; some readers might have missed what you said before.

Always mix interesting stories with useful information; fail to do this and your audience will feel you’re wasting their time.

Use Real People

Think of your favorite writers. You’ve probably seen their photos and heard them speak. Likewise, people need to see and hear your employees, so use pictures, audio and video. This will bring your audience closer to your brand.

Jakob Nielsen has studied people’s reactions to images online. He used eye-tracking software to discover that people ignore images that seem decorative, random or generic. They even ignore generic images of people. But when they come across a photo of a “real” person, they engage with it for a longer time.

People prefer to get involved with a company with which they feel a personal connection. But introduce your employees gradually; as with any story, introduce too many characters too early and you’ll confuse your audience.

Summary

Develop a compelling tone of voice. Don’t assume that anyone can write amazing copy, because they can’t. If you want the best content, then you need the best writers and thinkers.

Produce something informative that people will want to read. Give your brand a personality and your business will benefit across the board, from recruitment to sales. Warren Buffett looks for businesses protected by “unbreachable moats,” and no moat is more unbreachable than a brand with a story, ideas and opinions.

(al) (il)

© Craig Anderson for Smashing Magazine, 2012.

0
Your rating: None

Photo: tobias.munich/Flickr

Think your three-second page loads are “just fine”? Think again.

According to engineers at Google, even the blink of an eye — which takes around 400 milliseconds — is too long.

That’s the word from the New York Times, which makes an unusual foray into the world of web development with its article “For Impatient Web Users, an Eye Blink Is Just Too Long to Wait.”

Some web developers may remember the days of the two-second rule (and no, not the one that applies to dropping food on the floor). The established wisdom — well-tested at the time by usability experts like Jakob Nielsen and others — was that after two seconds the number of users willing to wait for your page to load dropped off significantly.

That rule still holds, it’s just the amount of time that’s changed. Nowadays, the Times claims, users drop off after a mere 400 milliseconds, and a difference in page load time of just 250 milliseconds is enough to convey a distinct advantage over your competitors.

It’s that last number that’s perhaps most interesting. Anyone who’s browsing the web via a 3G connection can tell you that if you’re only willing to wait 400 milliseconds for a page to load, you aren’t going to see much of the web. On mobile networks bandwidth constraints are even more of an issue than they were when the two-second maximum was popularized. Users seem to understand this, but they don’t see it as an excuse. Now, perhaps more than ever, slight differences in page load time can give your site a significant advantage over competitors, according to the Google and Microsoft engineers quoted in the Times piece.

In other words, users may still, in some circumstance, be willing a wait a second, but if your competitor’s page is even 250 milliseconds faster, you can kiss your users goodbye.

Don’t believe us? Head over to the Times article and see if Google’s engineers don’t convince you. When you’re done we’ve got a few tips on how to speed up your website and make sure that no one has the edge on you. Here are a few helpful articles from the Webmonkey archives:

0
Your rating: None

This article is about usability evaluation. For application of heuristics to antivirus software, see Heuristic analysis.

A heuristic evaluation is a discount usability inspection method for computer software that helps to identify usability problems in the user interface (UI) design. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles (the "heuristics"). These evaluation methods are now widely taught and practiced in the New Media sector, where UIs are often designed in a short space of time on a budget that may restrict the amount of money available to provide for other types of interface testing.

Introduction

The main goal of heuristic evaluations is to identify any problems associated with the design of user interfaces. Usability consultant Jakob Nielsen developed this method on the basis of several years of experience in teaching and consulting about usability engineering.

Heuristic evaluations are one of the most informal methods[1] of usability inspection in the field of human-computer interaction. There are many sets of usability design heuristics; they are not mutually exclusive and cover many of the same aspects of user interface design.

Quite often, usability problems that are discovered are categorized—often on a numeric scale—according to their estimated impact on user performance or acceptance. Often the heuristic evaluation is conducted in the context of use cases (typical user tasks), to provide feedback to the developers on the extent to which the interface is likely to be compatible with the intended users’ needs and preferences.

The simplicity of heuristic evaluation is beneficial at the early stages of design. This usability inspection method does not require user testing which can be burdensome due to the need for users, a place to test them and a payment for their time. Heuristic evaluation requires only one expert, reducing the complexity and expended time for evaluation. Most heuristic evaluations can be accomplished in a matter of days. The time required varies with the size of the artifact, its complexity, the purpose of the review, the nature of the usability issues that arise in the review, and the competence of the reviewers. Using heuristic evaluation prior to user testing will reduce the number and severity of design errors discovered by users. Although heuristic evaluation can uncover many major usability issues in a short period of time, a criticism that is often leveled is that results are highly influenced by the knowledge of the expert reviewer(s). This “one-sided” review repeatedly has different results than performance testing, each type of testing uncovering a different set of problems.

Nielsen's heuristics

Jakob Nielsen's heuristics are probably the most-used usability heuristics for user interface design. Nielsen developed the heuristics based on work together with Rolf Molich in 1990.[1][2] The final set of heuristics that are still used today were released by Nielsen in 1994.[3] The heuristics as published in Nielsen's book Usability Engineering are as follows[4]

Visibility of system status:
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Match between system and the real world:
The system should speak the user's language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

User control and freedom:
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Consistency and standards:
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Error prevention:
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Recognition rather than recall:
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of use:
Accelerators—unseen by the novice user—may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist design:
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help users recognize, diagnose, and recover from errors:
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentation:
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

Gerhardt-Powals’ cognitive engineering principles

Although Nielsen is considered the expert and field leader in heuristics, Jill Gerhardt-Powals also developed a set of cognitive principles for enhancing computer performance.[5] These heuristics, or principles, are similar to Nielsen’s heuristics but take a more holistic approach to evaluation. Gerhardt Powals’ principles[6] are listed below.

  • Automate unwanted workload:
    • free cognitive resources for high-level tasks.
    • eliminate mental calculations, estimations, comparisons, and unnecessary thinking.
  • Reduce uncertainty:
    • display data in a manner that is clear and obvious.
  • Fuse data:
    • reduce cognitive load by bringing together lower level data into a higher-level summation.
  • Present new information with meaningful aids to interpretation:
    • use a familiar framework, making it easier to absorb.
    • use everyday terms, metaphors, etc.
  • Use names that are conceptually related to function:
    • Context-dependent.
    • Attempt to improve recall and recognition.
    • Group data in consistently meaningful ways to decrease search time.
  • Limit data-driven tasks:
    • Reduce the time spent assimilating raw data.
    • Make appropriate use of color and graphics.
  • Include in the displays only that information needed by the user at a given time.
  • Provide multiple coding of data when appropriate.
  • Practice judicious redundancy.

Weinschenk and Barker classification

Susan Weinschenk and Dean Barker created a categorization of heuristics and guidelines by several major providers into the following twenty types:[7]

1. User Control: heuristics that check whether the user has enough control of the interface.

2. Human Limitations: the design takes into account human limitations, cognitive and sensorial, to avoid overloading them.

3. Modal Integrity: the interface uses the most suitable modality for each task: auditory, visual, or motor/kinesthetic.

4. Accommodation: the design is adequate to fulfill the needs and behaviour of each targeted user group.

5. Linguistic Clarity: the language used to communicate is efficient and adequate to the audience.

6. Aesthetic Integrity: the design is visually attractive and tailored to appeal to the target population.

7. Simplicity: the design will not use unnecessary complexity.

8. Predictability: users will be able to form a mental model of how the system will behave in response to actions.

9. Interpretation: there are codified rules that try to guess the user intentions and anticipate the actions needed.

10. Accuracy: There are no errors, i.e. the result of user actions correspond to their goals.

11. Technical Clarity: the concepts represented in the interface have the highest possible correspondence to the domain they are modeling.

12. Flexibility: the design can be adjusted to the needs and behaviour of each particular user.

13. Fulfillment: the user experience is adequate.

14. Cultural Propriety: user's cultural and social expectations are met.

15. Suitable Tempo: the pace at which users works with the system is adequate.

16. Consistency: different parts of the system have the same style, so that there are no different ways to represent the same information or behavior.

17. User Support: the design will support learning and provide the required assistance to usage.

18. Precision: the steps and results of a task will be what the user wants.

19. Forgiveness: the user will be able to recover to an adequate state after an error.

20.Responsiveness: the interface provides enough feedback information about the system status and the task completion.

See also

0
Your rating: None