Hybrid Mobile Apps: Providing A Native Experience With Web Technologies

Go to Source

According to a recent report1, HTML is the most widely used language for mobile app developers. The main reasons among developers for selecting web technologies2 are cross-platform portability of code and the low cost of development. We’ve also heard that hybrid apps tend to be sluggish and poorly designed. Let’s prove whether it’s possible to deliver the native look and feel that we’re used to.

HTML can do that.

This article provides many hints, code snippets and lessons learned on how to build great hybrid mobile apps. I’ll briefly introduce hybrid mobile app development, including its benefits and drawbacks. Then, I’ll share lessons I’ve learned from over two years of developing Hojoki and CatchApp, both of which run natively on major mobile platforms and were built with HTML, CSS and JavaScript. Finally, we’ll review the most prominent tools to wrap code in a native app.

What Are Hybrid Mobile Apps?

Mobile apps can be generally broken down into native, hybrid and web apps. Going the native route allows you to use all of the capabilities of a device and operating system, with a minimum of performance overhead on a given platform. However, building a web app allows your code to be ported across platforms, which can dramatically reduce development time and cost. Hybrid apps combine the best of both worlds, using a common code base to deploy native-like apps to a wide range of platforms.

There are two approaches to building a hybrid app:

  • WebView app
    The HTML, CSS and JavaScript code base runs in an internal browser (called WebView) that is wrapped in a native app. Some native APIs are exposed to JavaScript through this wrapper. Examples are Adobe PhoneGap3 and Trigger.io4.
  • Compiled hybrid app
    The code is written in one language (such as C# or JavaScript) and gets compiled to native code for each supported platform. The result is a native app for each platform, but less freedom during development. Examples are Xamarin5, Appcelerator Titanium6 and Embarcadero FireMonkey7.

While both approaches are widely used and exist for good reasons, we’ll focus on WebView apps because they enable developers to leverage most of their existing web skills. Let’s look at all of the benefits and drawbacks of hybrid apps compared to both native and mobile web apps.

Benefits

  • Developer can use existing web skills
  • One code base for multiple platforms
  • Reduced development time and cost
  • Easily design for various form factors (including tablets) using responsive web design
  • Access to some device and operating system features
  • Advanced offline capabilities
  • Increased visibility because the app can be distributed natively (via app stores) and to mobile browsers (via search engines)

Drawbacks

  • Performance issues for certain types of apps (ones relying on complex native functionality or heavy transitions, such as 3D games)
  • Increased time and effort required to mimic a native UI and feel
  • Not all device and operating system features supported
  • Risk of being rejected by Apple if app does not feel native enough (for example, a simple website)

These drawbacks are significant and cannot be ignored, and they show that the hybrid approach does not suit all kinds of apps. You’ll need to carefully evaluate your target users, their platforms of choice and the app’s requirements. In the case of many apps, such as content-driven ones, the benefits outweigh the drawbacks. Such apps can typically be found in the “Business and Productivity,” “Enterprise” and “Media” categories in the app store.

Both Hojoki and CatchApp are very content-driven productivity apps, so we initially thought they would be a great match for hybrid development. The first three benefits mentioned above were especially helpful to us in building the mobile app for Hojoki in just four weeks. Obviously, that first version lacked many important things. The following weeks and months were filled with work on optimizing performance, crafting a custom UI for each platform and exploiting the advanced capabilities of different devices. The learning in that time was crucial to making the app look and feel native. I’ll share as many lessons as possible below.

So, how do you achieve a native look and feel? To a mobile web developer, being able to use the features of a device and operating system and being able to package their app for an app store sounds just awesome. However, if users are to believe it is a native app, then it will have to behave and look like one. Accomplishing this remains one of the biggest challenges for hybrid mobile developers.

Make Your Users Feel at Home

A single code base doesn’t mean that the app should look and feel exactly the same on all platforms. Your users will not care at all about the underlying cross-platform technology. They just want the app to behave as expected; they want to feel “at home.” Your first stop should be each platform’s design guidelines:

While these guidelines might not perfectly suit all kinds of apps, they still provide a comprehensive and standard set of interfaces and experiences that users on each platform will know and expect.

DIY vs. UI Frameworks

Implementing all of these components, patterns and animations on your own can be quite a challenge. All kinds of frameworks exist to help you with that, ranging from commercial (Kendo UI11) to open-source ones (Ionic12) and from ones with a common UI (jQuery Mobile13 and Onsen UI14) to many platform-specific UIs (Sencha Touch7615 and ChocolateChip-UI16). Some are really good at providing a pixel-perfect layout, while others are rather sloppy, thus making it easy for the user to identify a web app. However, my impression is that their main drawbacks are performance-related, because most UI frameworks try to be as all-embracing as possible. Judge for yourself by taking a few minutes to try the demos on your own device.

At Hojoki, we try to craft all components on our own using CSS3 and minimal JavaScript. This keeps us in control of performance and reduces overhead. We obviously use small libraries for complicated tasks that someone else has solved just fine.

Custom UI Components

Custom UI components also have many good use cases. Deciding between a platform’s UI and a custom UI will obviously depend on your target audience. If you want to do your own thing, you should have a deep understanding of UX design, because the guidelines linked to above were crafted by experts to meet the particular requirements of their platform’s users.

Whether you stick to a platform’s UI guidelines or do your own thing with custom components, know that there are certain design patterns that most people use every day and love. How are people usually introduced to a new app? Through a slideshow walkthrough or an instructional overlay. How do people navigate? With a tab bar or a sidebar drawer17. How do users quickly load or refresh data? By pulling to refresh. (Native-like scrolling will be covered extensively further below.)

Resources for Mobile UI Design

Design A Native-Looking Header Bar

One important part of a UI is the header bar, with its title and navigation elements, most notably the “up” and “back” buttons. To me, many popular frameworks fail to provide a HTML and CSS solution that compares to a native app. Mimicking this part of the UI with a minimal DOM and a few lines of CSS for each platform is actually fairly easy:

<header>
   <button class="back">Feed</button>
   <h1>Details</h1>
   <!-- more actions (e.g. a search button on the right side) -->
</header>

Check out the full code of the native-looking header bar for iOS, Android and Windows Phone21 on JSFiddle. This is my result:

Native-looking headers made with HTML5 and CSS.
Native-looking headers made with HTML5 and CSS.

Using the same DOM across all platforms is generally preferable because it results in cleaner code and, therefore, maximizes maintainability. I’ve found this to be easily possible for many UI components on iOS and Android (including the header bar, tab bar, custom navigation menu, settings page, popover and many more). However, this becomes much harder when adding support for Windows Phone, which comes with some very different design patterns.

Support High-Resolution Screens

Nowadays, smartphones and tablets with high-resolution screens make up the vast majority of mobile devices, making up more than 80% of iOS devices22 and over 70% on Android devices23. To make your images look crisp for everyone, you usually have to deliver twice the dimensions than what is actually shown in your app. Serving properly sized images for all different resolutions is one of the most discussed topics in responsive web design. There are various approaches, each with its benefits and drawbacks related to bandwidth, code maintainability and browser support. Let’s quickly review the most popular ones, in no particular order:

  • server-side resizing and delivering
  • client-side detection and replacement via JavaScript
  • HTML5 picture element
  • HTML5 srcset attribute
  • CSS image-set
  • CSS media queries
  • Resolution-independent images (SVG)

As always, there is no silver bullet for responsive images. It pretty much depends on the type of images and how they are used in the app. For static images (such as the logo and tutorial images), I try to use SVG. They scale perfectly without any extra effort and have great browser support as long as you’re fine with Android 3+24.

When SVG is not an option, the HTML5 picture element and srcset attributes25 are definitely where front-end development is heading. Currently, their main drawback is the very limited browser support and, therefore, their need for polyfills.

In the meantime, CSS background images and media queries26 are the most pragmatic solution:

/* Normal-resolution CSS */
.logo {
   width: 120px;
   background: url(logo.png) no-repeat 0 0;
}

/* HD and Retina CSS */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {
	.logo {
      background: url(logo@2x.png) no-repeat 0 0;
      background-size: 120px; /* Equal to normal logo width */
   }
}

However, your app might already contain a lot of content (such as news articles), and adjusting all of the img tags or replacing them with CSS would be exhausting. A server-side solution is the best choice in this case.

Starting last year, more and more Android manufacturers have gone one step further with what is called XXHDPI (or very very high-resolution) screens. Whichever solution above fits your need, keep in mind that you’ll need images that are three times the original dimensions to support Android’s latest flagship devices.

Use System Fonts

A simple yet important way to make users feel at home is to use system fonts.

Native fonts for iOS, Android and Windows Phone.
Native fonts for iOS27, Android28 and Windows Phone29.

These are my recommended font stacks on the major platforms:

/* iOS */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Android */
font-family: 'RobotoRegular', 'Droid Sans', sans-serif;

/* Windows Phone */
font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;

Furthermore, iOS 7 offers some interesting presets that automatically set the correct font family, font size and line height. It’s as easy as using font: -apple-system-body for normal text and font: -apple-system-headline for headings. This not only simplifies font declarations, but also improves accessibility through “dynamic type30,” Apple’s system-wide font-size setting. You can dig deeper into iOS 7 font presets in a post by Thomas Fuchs31.

An Icon Is Worth A Thousand Words

Iconography is an important part of the user experience on all major mobile platforms. As with fonts, you’re usually best off using icons that your target audience already knows. Recalling what I said about high-resolution screens earlier, make sure that your icons are scaleable. Implementing them as a font via CSS’ @font-face rule is a great way to achieve this, and it comes with wide browser support32. It even allows you to change an icon’s appearance (for example, its color, shadow and transparency) seamlessly via CSS. Here are my recommendations:

  1. Get various platform icon fonts.
    Ionicons33 is our baseline set because it includes nearly everything we need. This includes specific icons for iOS and Android in addition to their general ones. The rest come from specific platform icon fonts for iOS34, Android set 135 and set 236 and Windows Phone37.
  2. Combine them with a icon font generator.
    Using multiple icon fonts is confusing and quickly adds up in size. That is why we use Fontello38 to combine the different sets, adjust key codes and export them for each platform. The result is <span class="icon">s</span>, which looks like a search icon on iOS, Android and Windows Phone. Also, check out the popular alternatives IcoMoon39 and Fontastic40.

On Windows Phone, you can also get away with the native font-family: 'Segoe UI Symbol'41.

Optimize For Performance

Performance is usually considered to be one of the major disadvantages of a hybrid mobile app. This is mostly true if your app has a lot of heavy animations, contains huge scrolling lists and needs to run on old devices. However, if you are all right with supporting only newer platform versions (Android 4+, iOS 7+ and Windows Phone 8+), then you’ll very likely have satisfying results. It’s ultimately a question of how much effort you put into optimizing DOM and CSS selectors, writing performant JavaScript, reducing rendering time and minimizing the number of reflows and repaints. An endless number of articles and tutorials cover mobile web performance. These are some of my favorites:

Beyond that, mobile hardware and rendering engines are improving at a rapid pace, with new devices coming out every other day. Developers can make the performance of a hybrid WebView app difficult to distinguish from that of a fully native app on the iPhone 5 series and on Android phones comparable to Nexus 4 and 5.

Increase Perceived Speed

Building a performant app is one thing, but making it feel fast is a whole other. Whether your app needs some time for a certain task (such as some heavy calculation or client-server communication), presenting instant feedback is crucial to providing a fluid and responsive experience. A common technique is to delay tasks that the user doesn’t need yet, while predicting and preloading the steps the user might take next. A famous example is Instagram, which uploads photos in the background47 while the user is busy adding tags and sharing. Perceived speed can be very different from actual speed, so let’s use it in our favor. Here are some no-brainers.

Remove the Click Delay on Touch Devices

A normal JavaScript click event handler on a touch device comes with a slight delay between the touchstart and the click being fired (usually around 300 milliseconds). This feature is built into the browser to detect whether the user is performing a single- or double-tap. If you don’t need the “double-tap to zoom” feature, you can safely eliminate these 300 milliseconds to get a much more responsive tap behavior. My favorite solution for this is the FastClick48 library. Use it on everything except Internet Explorer:

if ('ontouchstart' in window) {
   window.addEventListener('load', function() {
      FastClick.attach(document.body);
   }, false);
}

Internet Explorer 10+ is a bit easier. You just need some CSS:

html {
   -ms-touch-action: manipulation; /* IE 10  */
       touch-action: manipulation; /* IE 11+ */
}

Style the Active State

As soon as the user taps an actionable element such as a button or a link, they should immediately get some kind of feedback that the app has detected their action. While the CSS pseudo-class :hover works great for this on the desktop, you need to switch to :active or a JavaScript solution for it to work on mobile. I’ve compared the three approaches to the active state49 on JSFiddle. While they all work one way or another, you judge which is best for you.

Furthermore, remove the default tap highlight while adjusting your active states on mobile. I’d also recommend disabling user selections on actionable elements, because the selection menu would be quite disruptive if the user accidentally taps the button for too long.

iOS and Android:

button {
   outline: 0;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}

Windows Phone 8+:

<meta name="msapplication-tap-highlight" content="no">

Indicate Loading

Whenever your app is performing an action that will take some time to finish, even just for a second, consider adding a loading indicator. If you don’t, users will think that your app freezes occasionally, or they’ll click around when they shouldn’t, or they might even break things and then blame your app. From what I’ve experienced, animated GIFs are usually a bad idea in mobile browsers. As soon as there is a load on the CPU, the GIF freezes, thus defeating its entire purpose. I prefer Spin.js50 for its configurability and ease of use. Also, check out some other JavaScript solutions51 and CSS loaders52.

Cross-platform tools like PhoneGap and Trigger.io also provide access to native loaders, which is great for showing a full-screen loading animation.

Get the Scrolling Right

Scrolling is one of the most important factors in the user experience of many apps. This is both a curse and a blessing because the success of its implementation will depend heavily on the scrolling niceties that your app relies on and on the mobile operating systems that need to be supported.

Scrollable content and a fixed header and/or footer bar are common to nearly all apps. There are two common approaches to achieving this with CSS:

  1. Enabling scrolling on the body, and applying position: fixed to the header;
  2. Disabling scrolling on the body, and applying overflow: scroll to the content;
  3. Disabling scrolling on the body, and applying JavaScript custom scrolling to the content.

While the first option has some benefits (such as iOS’s native scroll-to-top action and a simple code structure), I highly recommend going with the second option, overflow: scroll. It has fewer rendering issues53 (although still a lot), and browser support is great on modern platforms (Android 4+, iOS 5+ and Windows Phone 8+), with a nice little polyfill for some older ones54. Alternatively, you could replace overflow: scroll with a custom scrolling library (the third option), such as iScroll55. While these JavaScript solutions allow for more flexibility with features (for example, the scroll position during momentum, event handling, customization of effects and scrollbars, etc.), they always penalize performance. This becomes critical when you’re using a lot of DOM nodes and/or CSS3 effects (such as box-shadow, text-shadow, opacity and rgba) in the content area.

Let’s look at some of the basic scrolling features.

Momentum Effect

The touch-friendly momentum effect enables users to quickly scroll through large content areas in an intuitive way. It can be easily activated with some simple CSS on iOS 5+ and in some versions of Chrome for Android. On iOS, this will also enable the content to bounce off the top and bottom edges.

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

Pull Down to Refresh

Various solution for this are available on the web, such as the one by Damien Antipa5756. While the solutions for iOS and Windows Phone have a similar look and feel, Android recently introduced its own mechanism (see below). We’ve implemented this in CatchApp using some JavaScript and CSS keyframes. (I have yet to wrap it up nicely and put it on GitHub, so stay tuned!)

Pull down to refresh on iOS
Pull down to refresh on iOS. (Image credit: Damien Antipa5756)
Pull down to refresh on Android.
Pull down to refresh on Android. (Image credit: Android Widget Center58)
Pull down to refresh on Windows Phone.
Pull down to refresh on Windows Phone. (Image credit: David Washington59)

Scroll to Top

Unfortunately, disabling scrolling on the body will also break iOS’ native feature that enables users to quickly get to the top of the page by tapping the status bar. I’ve written a small script that can be added to any element and that takes care of scrolling to the top using JavaScript60, even if the content is currently in momentum. Add it to the header of your mobile website or to the status bar with a native plugin (for example, in PhoneGap).

Many other scrolling features could be implemented on top of the native overflow: scroll, such as snapping to a certain element or just infinite scrolling. If your requirements are more advanced, definitely look at the JavaScript options out there.

Make It Easy To Hit Stuff

When performing a touch action, users will quite often miss their target by a few pixels, especially on small buttons (such as the ones in iOS’ top bar). Developers can assist users while keeping the design elegant by enabling an invisible touch area around small targets:

<button>
   <div class="innerButton">Click me!</div>
</button>

You’ll have to put the event handler on the button element, while restricting the styles to div.innerButton. Check out the full example, including CSS61, on JSFiddle.

Using Touch Gestures

A smartphone is all about touching and gestures. We swipe, pinch, zoom, drag and long-tap all the time when interacting with touch devices. So, why not offer users the same means of controlling your hybrid app? QuoJS62 and Hammer.js63 are well-known libraries for supporting all kinds of gestures. If you’d like more choice, check out Kevin Liew’s comparison of “11 Multi-Touch and Touch Events JavaScript Libraries64.”

Don’t Miss Out on Native Functionality

Building your app with web technology doesn’t necessarily mean that you can’t use native features. In fact, all major cross-platform development tools provide built-in access to the most important functionality. This includes APIs for device data, the file system, the network connection, geolocation, the accelerometer, notifications (including push) and much more.

You can usually even extend a development tool by building custom plugins. At Hojoki, we added many missing features, including reading the user’s setting for push notifications for our app, detecting the user’s time zone, and checking whether a third-party app is installed and launching it. Let’s look at two very simple examples for things that can be realized with native plugins. First, let’s enable JavaScript focus() for input fields on iOS 6+:

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 6) {
   [YourWebView setKeyboardDisplayRequiresUserAction:NO];
}

And here’s the code to copy a given string to the device’s clipboard on iOS:

[[UIPasteboard generalPasteboard] setString:@"Your copied string"];

Always Provide a Way Out

Web developers often overlook how to handle bad situations in a hybrid app (for example, a connection timeout, a bad input, a timing issue, etc.). A hybrid app is fundamentally different from a website, mainly because there is no global refresh button, and an app can easily run in the background for weeks on some mobile operating systems. If the user runs into a dead end, their only option will be to restart the app, which entails force quitting and then restarting. Many people don’t even know how to do that, especially on Android 2.x (where it’s hidden deep in the app’s settings) and on iOS 6 and below (where you have to double-tap the home button, long-press the icon and kill it).

So, ignore the refresh button during development, and handle bad situations as they come up. For all other situations that would have unexpected outcomes, such as ones involving client-server communication, be prepared for things to go wrong, and provide a way out for users. This could be as easy as showing a full-screen error message — “Oops! Something bad happened. Please check your connection and try again” — with a big “Reload” button below.

How To Wrap It

Developing a hybrid mobile app means using the same tools and processes that you would usually use to develop (mobile) websites. Having said that, one thing I really like about the hybrid approach is that you can deploy HTML, CSS and JavaScript code as a mobile web app with relative ease. Make sure to implement fallbacks for native features, or find elegant workarounds if they are not supported at all. Most mobile developers prefer to keep users in a native app, and you could even advertise the app to your mobile website’s users.

Native WebView wrapper around a HTML/CSS/JavaScript code base.65
A native WebView wrapper, with an HTML, CSS and JavaScript code base. (View large version66)

What about the native part? Your mobile web app (plain HTML, CSS and JavaScript) will be loaded in a WebView, which is an internal browser engine that renders an app the way a default browser on the device would render it (there might be slight differences — your mileage may vary). Additionally, native “bridges” are used to expose features of the device and operating system through an API to make them accessible with JavaScript. This usually includes access to the device’s camera, address book, geolocation, file system and native events (for example, via one of the hardware buttons on Android), to name just a few features.

A few cross-platform development tools provide that native bridge and simplify the whole process of wrapping it. Let’s dive into some options.

PhoneGap and Apache Cordova

PhoneGap67 is certainly one of the most popular tools for cross-platform development. The name itself is often used synonymously with hybrid mobile app development.

There has been some confusion about its name68 and relation to Apache Cordova69, which is understandable. The latter is a top-level Apache project that was formerly called PhoneGap. It offers a set of device APIs to access native functionality from HTML, CSS and JavaScript code running in a WebView. Now, Adobe PhoneGap is a distribution of Cordova — not unlike the way Chrome uses WebKit as its engine.

Both are open-source and free to use, with support for all major platforms and with an active community developing all kinds of plugins and extensions.

PhoneGap has shaped the hybrid lanscape significantly, and many new tools have emerged that offer additional services or that streamline the development process. They usually add a lot of convenience by enabling you to build an app in the cloud, thereby saving you the effort of locally installing all of the different platform SDKs and tools. Each tool has a different focus, level of platform support and price:

Sencha Touch

Sencha Touch7615 started out as a UI framework for the mobile web and has been around for years. Traditionally, developers have used Sencha to build an app while using another service, like PhoneGap, to deploy it as a hybrid app. Nowadays, Sencha offers this kind of functionality built in for free. Platform support includes iOS and Android (both via Sencha’s own native packager) BlackBerry, Windows 8 and more (via PhoneGap Build).

Trigger.io

At Hojoki, we started using Trigger.io77 two and a half years ago because we were looking for a lightweight alternative to PhoneGap. Even though iOS and Android are its only supported platforms, it offers a good set of native APIs, custom plugins and third-party integration (including Parse push notifications, Flurry analytics and parts of Facebook’s SDK). Trigger.io’s command-line tools allowed us to integrate the app’s packaging into our Grunt78 build process, which is great if you love automation.

One of its key features is Reload9179, which enables developers to push HTML, CSS and JavaScript updates to an app on the fly. Unlike PhoneGap Build’s Hydration80, Reload is specifically designed for development and production apps. This makes it possible to legally bypass Apple’s submission process to push bug fixes and iterate quickly with A/B testing.

Once the 14-day trial is up, Trigger.io’s steep pricing81 is probably the biggest downside for many developers.

With MoSync82 having gone offline a couple of days ago, Trigger.io seems to be the only remaining tool that is not associated with PhoneGap.

Test on Real Devices

Building a mobile app with web technologies obviously tempts us to do most of our testing in a web browser. This might be fine when developing non-native features, but definitely avoid it when releasing. Test with as many manufacturers, platforms and form factors as possible before submitting the app. Android’s fragmentation brings endless possibilities of differences in browser rendering, unsupported features and manufacturer modifications. While iOS does much better with rendering differences, Apple has a growing number of devices with varying sizes, resolutions and pixel densities. Check out “Prioritizing Devices: Testing and Responsive Web Design83” to learn more.

When Facebook famously ditched most of its HTML5 and went native in 2012, it cited missing debugging tools and developer APIs84 as one of its main reasons. LinkedIn drew the same conclusions85 half a year later, stating that HTML5 itself is ready, but basic tools and the ecosystem don’t support it yet. From what I’m seeing, the situation is getting better, with remote debugging in WebView on Android 4.4+ and an increasing number of development tools on all platforms:

Start Thinking in Terms of Hard Releases

When building an app for web browsers, deploying a hot fix to users is a simple step, which means that testing can lose some of its importance. This obviously needs to be reconsidered when you’re releasing an app through an app store. Think of it like software development in the ’90s: You’re now living in the world of hard releases.

So, why is this bad? First, the submission process could easily take a week or two (Hello, Apple!). Secondly, even if your hot fix is released quickly, that doesn’t guarantee that users will update the app any time soon. Here are my suggestions:

  1. Make testing a high priority.
  2. Have some kind of “force update” logic to deprecate old client versions.
  3. Use mechanisms like Trigger.io’s Reload9179 to fix code on the fly.
  4. Apply for an expedited app review92 (Apple only) if you need to be fast.

Get It in the Stores

The tools mentioned above spit out a binary for each platform, which can then be submitted to the relevant store. From this point on, the process is exactly the same as publishing a “normal” native app. Some of the tools we’ve looked at might even have better documentation for this. Nevertheless, here are the official guides:

Conclusion

Now that our hybrid mobile apps have been in Apple’s App Store and in Google Play for two years, I’d like to recapitulate some of the benefits and drawbacks mentioned at the beginning of this article.

For us, a web startup company with very limited resources and no native iOS or Android experience, building an app for multiple platforms in just a few weeks would have been impossible. Choosing the hybrid path enabled us to reuse a lot of code from the web app and to iterate quickly based on user feedback. We’ve even managed to publish native apps for Windows 8 for the desktop and Microsoft Surface as well as Mac OS X with exactly the same code base. The effort of moving to another platform will depend largely on the capabilities of the given browser and device and on the level of your need for native functionality. We needed push notifications, in-app purchases and access to the user’s contacts, among other things. Depending on your needs, a lot of native functionality could make you heavily dependent on the native wrapping tool that you choose.

Finally, let’s see whether hybrid apps really can deliver a native look and feel. Below is a compilation of user reviews from the app stores. Both positive and negative comments are included, but many of the negative reviews are for early releases, which had the same UI for all platforms and was comparatively slow in performance.

★ Great idea, but not a good app. The app runs extremely slow on my Samsung Galaxy Ace and Tab. The app also looks and controls like an iPhone app. This is confusing when you have never had an iPhone.

★★ Another reason apps should not use WebViews for UI.

★★ Service great but WebView app sucks.

★★★ It’s the right app in concept, but it really is too laggy to be practically used. And I’m using Jellybean so there is no excuse.

★★★ It lags a lot and the UI is not beautiful.

★★★ Good but very very slow.

★★★★ This app is very handy, but is a little slow to boot up.

★★★★★ This is working really hard well since the update. It’s a great app to begin with and now it’s working smoother and faster than before.

★★★★★ Extremely smooth and effective.

★★★★★ The app work flawlessly…

★★★★★ Beautiful designed app! Love the interface and the great overview of all your tools! Good job! Keep shippin!

★★★★★ This is an absolutely beautiful aggregate that runs buttery smooth, even on a 3GS. Recommend to anyone doing any sort of project.

We’re definitely moving away from platform-specific app development and towards the many new technologies that are emerging. Larry Page said this97 when asked at Google I/O last year about the future of the web:

In the very long term, I don’t think you should have to think about, as a developer, am I developing for this platform or another, or something like that. I think you should be able to work at a much higher level, and software you write should run everywhere, easily.

The (mobile) web is a major success story in this regard. Being able to use this platform and still be able to distribute an app in all stores is a huge step forward. It will be interesting to see how this all plays out. Whatever happens, using a technology that over a third of the world’s population98 (over two thirds in Europe and the US) relies on probably won’t be a bad choice.

(da, al, ml)

Footnotes

  1. 1 http://www.visionmobile.com/product/developer-economics-q3-2014/
  2. 2 http://www.visionmobile.com/product/developer-economics-2013-the-tools-report/
  3. 3 http://www.phonegap.com
  4. 4 http://www.trigger.io
  5. 5 https://xamarin.com/
  6. 6 http://www.appcelerator.com/titanium/
  7. 7 http://www.embarcadero.com/products/rad-studio/fmx
  8. 8 https://developer.apple.com/library/ios/navigation/
  9. 9 http://developer.android.com/design/index.html
  10. 10 https://dev.windowsphone.com/design
  11. 11 http://www.telerik.com/kendo-ui
  12. 12 http://ionicframework.com/
  13. 13 http://jquerymobile.com/
  14. 14 http://onsenui.io/
  15. 15 http://www.sencha.com/products/touch/
  16. 16 http://chocolatechip-ui.com/
  17. 17 https://github.com/jakiestfu/Snap.js
  18. 18 http://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/
  19. 19 http://c2prods.com/2013/cloning-the-ui-of-ios-7-with-html-css-and-javascript/
  20. 20 http://de.slideshare.net/yaelsahar/tapping-into-mobile-ui-with-html5
  21. 21 http://jsfiddle.net/prud/dnebx02p/
  22. 22 http://david-smith.org/iosversionstats/#retina
  23. 23 http://developer.android.com/about/dashboards/index.html#Screens
  24. 24 http://caniuse.com/#feat=svg
  25. 25 http://responsiveimages.org/
  26. 26 http://www.uifuel.com/hd-retina-display-media-queries/
  27. 27 http://iosfonts.com/
  28. 28 http://developer.android.com/design/style/typography.html
  29. 29 http://msdn.microsoft.com/library/windows/apps/hh700394.aspx#ux_font_choice
  30. 30 http://support.apple.com/kb/HT5956
  31. 31 http://mir.aculo.us/2013/09/16/how-to-create-a-web-app-that-looks-like-a-ios7-native-app-part-1/
  32. 32 http://caniuse.com/#feat=fontface
  33. 33 http://ionicons.com/
  34. 34 http://ios7-icon-font-demo.herokuapp.com/
  35. 35 http://www.spiderflyapps.com/downloads/android-developer-icons-the-font/
  36. 36 https://github.com/Turbo87/Android-Action-Bar-Icon-Pack-Font
  37. 37 http://modernuiicons.com/
  38. 38 http://fontello.com/
  39. 39 https://icomoon.io/app
  40. 40 http://fontastic.me/
  41. 41 http://msdn.microsoft.com/library/windows/apps/jj841126.aspx
  42. 42 http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/
  43. 43 http://estelle.github.io/mobileperf/
  44. 44 http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
  45. 45 https://developers.google.com/speed/articles/reflow
  46. 46 http://www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website/
  47. 47 http://www.cultofmac.com/164285/the-clever-trick-instagram-uses-to-upload-photos-so-quickly/
  48. 48 https://github.com/ftlabs/fastclick
  49. 49 http://jsfiddle.net/prud/x9y6cfhg/
  50. 50 http://fgnass.github.io/spin.js/
  51. 51 http://www.queness.com/post/9150/9-javascript-and-animated-gif-loading-animation-solutions
  52. 52 http://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/
  53. 53 http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/
  54. 54 https://github.com/filamentgroup/Overthrow#browser-support
  55. 55 http://iscrolljs.com/
  56. 56 http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/
  57. 57 http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/
  58. 58 http://androidwidgetcenter.com/android-tips/how-to-refresh-gmail-on-android/
  59. 59 http://dwcares.com/pull-to-refresh-2/
  60. 60 https://github.com/prud/ios-overflow-scroll-to-top
  61. 61 http://jsfiddle.net/prud/r7kqr1a3/
  62. 62 http://quojs.tapquo.com/
  63. 63 http://hammerjs.github.io/
  64. 64 http://www.queness.com/post/11755/11-multi-touch-and-touch-events-javascript-libraries
  65. 65 http://www.smashingmagazine.com/wp-content/uploads/2013/05/07-hybrid-app-opt.jpg
  66. 66 http://www.smashingmagazine.com/wp-content/uploads/2013/05/07-hybrid-app-opt.jpg
  67. 67 http://phonegap.com/
  68. 68 http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/
  69. 69 http://cordova.io
  70. 70 https://build.phonegap.com/
  71. 71 http://www.telerik.com/appbuilder
  72. 72 http://www.appgyver.com/
  73. 73 http://appery.io/
  74. 74 http://monaca.mobi
  75. 75 https://software.intel.com/html5/tools
  76. 76 http://www.sencha.com/products/touch/
  77. 77 https://trigger.io
  78. 78 http://gruntjs.com/
  79. 79 https://trigger.io/reload/
  80. 80 http://docs.build.phonegap.com/en_US/tools_hydration.md.html
  81. 81 https://trigger.io/pricing/
  82. 82 http://www.mosync.com/
  83. 83 http://www.smashingmagazine.com/2014/07/14/testing-and-responsive-web-design/
  84. 84 http://lists.w3.org/Archives/Public/public-coremob/2012Sep/0021.html
  85. 85 http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/
  86. 86 https://developer.apple.com/safari/tools/
  87. 87 https://developer.chrome.com/devtools/docs/remote-debugging
  88. 88 http://msdn.microsoft.com/en-us/library/windows/apps/hh441472.aspx
  89. 89 http://people.apache.org/~pmuellr/weinre/
  90. 90 http://html.adobe.com/edge/inspect/
  91. 91 https://trigger.io/reload/
  92. 92 https://developer.apple.com/appstore/contact/appreviewteam/index.html
  93. 93 https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/Introduction/Introduction.html
  94. 94 http://developer.android.com/distribute/googleplay/start.html
  95. 95 http://developer.android.com/distribute/tools/launch-checklist.html
  96. 96 http://msdn.microsoft.com/library/windows/apps/jj206736.aspx
  97. 97 http://youtu.be/9pmPa_KxsAM?t=2h56m6s
  98. 98 http://en.wikipedia.org/wiki/List_of_countries_by_number_of_Internet_users

The post Hybrid Mobile Apps: Providing A Native Experience With Web Technologies appeared first on Smashing Magazine.

What’s new for designers, October 2014

Go to Source

what's new for designers october 2014The October edition of what’s new for web designers and developers includes new web apps, content management systems, iOS apps, email resources, social media tools, project management apps, CSS tools, and some really great new fonts.

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

Elokenz

Elokenz is a blogging toolbox that includes tools for engaging with readers on social media, tracking performance, and semantic search engine optimization.

elokenz

 

Storify

Storify is an easy-to-use platform for engaging with others on social media. It includes tools for managing breaking news, live events, brand campaigns, captured chats, and more.

storify

 

Litmus Builder

Litmus Builder is a web-based email editor for building better marketing emails. It includes one-click testing, easy HTML editing, and preview tools for desktop and mobile.

litmus builder

 

Adobe Color CC

Adobe Color CC makes it easy to create color palettes from any image on your iOS device, wherever inspiration strikes. It includes an interactive color wheel, preset color modes, and more.

adobe color cc

 

Adobe Brush CC

Adobe Brush CC lets you create Photoshop and Illustrator brushes right on your iPad or iPhone.

adobe brush cc

 

Adobe Shape CC

Want to create a vector shape from an image? Adobe Shape CC makes it simple to turn any high-contrast image into vectors, right on your iOS device.

adobe shape cc

 

Edge Commons

Edge Commons is a collection of “dirty little helpers” for using Adobe Edge Animate. It includes helpers for parallax, spotlight, adaptive layouts, and more.

edge commons

 

Gleez CMS

Gleez CMS is an open source and extensible CMS that’s built on the Kohana Framework. It includes support for modules, themes, widgets, users and groups, and more.

gleez cms

 

AllTheFreeStock.com

AllTheFreeStock.com curates free stock images, videos, and icons from various sources, all of which are licensed under the Creative Commons Zero license.

allthefreestock

 

Anchor

Anchor is free, self-hosted invoicing software that makes it easy to get paid with PayPal or Stripe.

anchor

 

GifDeck

GifDeck is a tool for converting your SlideShares into animated Gifs. All you have to do is paste in your SlideShare URL.

gifdeck

 

Mapbox Studio

Mapbox Studio is a vector-driven map design app. It includes typography options, imagery and effects tools, and more.

mapbox studio

 

Dimensions

Dimensions is a Chrome browser extension that makes it easy to measure anything in your browser. You can measure between images, input-fields, buttons, videos, gifs, text, icons, and anything else you see in the browser.

dimensions

 

Anicons

Anicons is a set of animated icons. The first version has over 40 icons, all of which can be customized.

anicons

 

Stack

Stack is a simple task manager for keeping projects on track with your team. It includes customiable columns, unlimited projects, and more, and comes with a 30 day free trial.

stack

 

Mix

Mix is a collaborative design app from FiftyThree that lets you build upon the designs of others. You can write, design, sketch, and more.

mix

 

Template Builder

Campaign Monitor’s Template Builder makes it easy to build a free HTML email in just 60 seconds. Emails are fully tested, mobile ready, and can be downloaded for use outside of Campaign Monitor.

template builder

 

Fitter Happier Text

Fitter Happier Text gives you fully fluid, performant headlines using JavaScript and JSON.

fitter happier text

 

Design Kit

Design Kit is a set of design tools for human-centered design. It’s available in hard copy for purchase, or as a free PDF download.

design kit

 

Creative VIP

Creative VIP is a subscription service that offers exclusive discounts and more than 600 graphic design resources to its members.

creative vip

 

Takana

Takana is a live SCSS and CSS editor. It lets you see your changes live, in the browser, as you make them.

takana

 

Apple Watch GUI PSD

This Apple Watch GUI PSD is a great resource for designers looking to get started with Apple Watch apps.

apple watch gui psd

 

Pictura

Pictura is a simple Photoshop plugin for searching Flickr right from within Photoshop, and then using images you’ve found right into your project without an outside download.

pictura

 

DragGradients

DragGradients is a simple gradient generator that lets you drag and drop points within your browser’s viewport to create a custom gradient. You can customize the colors (including how many) and then download the CSS.

draggradients

 

Dropbox Guide

These Dropbox Guides are available for both Users and Admins, and including information on how to best utilize Dropbox for your business.

dropbox guide

 

Random CSS Gradient Generator

The Random CSS Gradient Generator generates a completely random gradient, which you can then grab the code for.

random css gradient generator

 

Email Design Guide

MailChimp’s Email Design Guide offers up some great advice on how to best convey your email message, with better use of images, fonts, and more.

email design guide

 

Basscss

Basscss is a collection of base element styles, utilities, layout modules, and more designed for speed and performance, as well as scalability.

basscss

 

Readme

Readme is an easy way to create documentation and reference materials for your apps. It includes a theme builder, API explorer so users can play with your API right inside the documentation, and more.

readme

 

UX Companion

UX Companion is a glossary of UX theories, tools, and principles for your iOS device. You can learn new concepts and techniques, and then dive into more in-depth hand-picked resources.

ux companion

 

Random Users Generator

This simple Random Users Generator makes it easy to create random users for your app, complete with names, photos, contact information, short bios, job titles, and more.

random users generator

 

Lychee

Lychee is a self-hosted photo management app that runs on your server or web hosting. It lets you upload, manage, and share photos like you would from a native app.

lychee

 

Polya (free)

Polya is a display font with a geometric flare that’s free for personal and commercial use.

polya

 

Arca Majora (free)

Arca Majora is a free uppercase font with geometric shapes that’s great for display use.

arca

 

Nexa Rust ($49)

Nexa Rust is a superpack of 83 fonts, creating a multifaceted font system that includes sans, slab, script, and handmade styles, as well as extras.

nexa rust

 

Brela (free)

Brela is a free serif typeface that looks great at display or body sizes.

brela

 

YWFT Agostina Alternate ($25)

YWFT Agostina Alternate is an updated and improved version of the original YWFT Agostina font that retains all of the swash forms, letter counts, and Opentype features of the original.

agostina alternate

 

Handtypo Script ($15)

Handtypo Script is an adaptable, unique script typeface that works well with a variety of other typefaces.

handtypo

 

Slabby Joe ($8)

Slabby Joe is a handwritten typeface that comes in light, regular, and bold weights.

slabby joe

 

Windflower ($5)

Windflower is an uppercase display typeface that’s inspired by vintage serif fonts. It’s great for posters and other display uses.

windflower

 

Eveleth ($9)

Eveleth is a distressed letterpress family that has vintage charm and exceptional realism.

eveleth

 

Madras ($10)

Madras is a sans-serif type family that includes seven weights, plus matching italics.

madras

 

Know of a new app or resource that should have been included but wasn’t? Let us know in the comments!

25+ Premium WordPress Themes from Zappy Themes – only $37!
Whats new for designers, October 2014

Source

Improving Your Information Architecture With Card Sorting: A Beginner’s Guide

Go to Source

Information architecture (IA) is one of those buzzwords you’ve probably heard before. It refers to the organization of the information on your website and how it all fits together. When planning your IA, involve users of your website in the process as soon as you can.

In this article, we’ll discuss card sorting, a tried and true technique for doing just that. We’ll go through some practical tips for running a card-sorting session, and also cover some examples.

What Is Information Architecture?

One of the great things about modern web design is the way it considers users’ needs from the start. Successful projects are successful often because the owners commit to understanding users, their backgrounds and their goals as early as possible. Like anything else in this game, though, a successful project takes work and planning.

1
Good IA helps to make a project successful. It makes content easy to find on a complex website. This is also helped by effective navigation; however, there is some confusion about the difference between the two. What is the difference, anyway? (Image source2)

Good Navigation Starts With Good IA

IA refers to the structure of information on a website, and it is depicted with site maps, diagrams and spreadsheets. Navigation refers to elements of an interface that people use to make their way through that structure — menus, breadcrumbs, links — and it is depicted in wireframes or prototypes. Therefore, improving IA starts with analyzing the website’s content and structure first — navigation comes after.

As with many website improvements, it helps to use techniques that involve users. Card sorting is one such technique that has been used for many years due to its reliability and effectiveness. To start with, we’ll examine the causes of poorly organized information — prevention is always better than a cure! We’ll then cover some practical tips for running your own card-sorting sessions and consider how they can improve the IA in your own projects.

Bad IA Is Everywhere

Bad organization can happen anywhere. When was the last time you spent ages looking for something within a complex system and couldn’t find it? A typical example is trying to find something at a large supermarket. Most people could easily find household staples in the frozen goods, dairy or fresh produce section. But which section would you visit to find more obscure products? Where would you find gluten-free bread, your favorite imported brand of hot sauce or that artisanal handmade bean dip you tried at the party last weekend?

Where’s the Hot Sauce?

I sometimes struggle when looking for products at my supermarket, which increases my frustration. I usually end up asking a store employee where to find the item, assuming I haven’t left the store already. The same is true of the web, except that users are even less patient. If users can’t find what they want in seconds, by either browsing or searching, they’re unlikely to stick around. As a result, websites (and supermarkets) benefit greatly from an intuitive structure and organization. Unfortunately, some fail to address these issues properly, leading to lost sales as customers grow frustrated and leave.

How Bad IA Happens

It’s not difficult to end up with a badly organized website, despite one’s best intentions. But how does a website end up like this in the first place?

One of the most common reasons is that the IA is created from the business structure of the organization, rather than from users’ needs. This is the default option for many clients. More common still is when the information is organized according to the preferences and whims of senior members in the company. This is often due to the influence of the HIPPO3 (the highest paid person’s opinion), usually made by an assertive individual who often lacks a grasp of what makes a good website.

The Importance of Content Strategy

For larger websites, the issue is often the lack of a clear content strategy. Managing content is crucial for websites that are large or frequently updated. Content strategy covers processes like:

  • who updates the website and how often,
  • the system for managing old or out-of-date content,
  • maintaining the taxonomies for content on the website (tags, types, categories, labels).

As web professionals, we take pride in our work and planning abilities. Being confronted by an overbearing HIPPO and archaic content strategies is frustrating. However, both of these problems have a common solution. User-centered techniques such as card sorting are powerful because they enable you to be much more scientific in diagnosing and fixing website problems. Later on, we’ll look at how card sorting and content strategy work hand in hand.

How Card Sorting Helps

So, how do we get users involved in organizing the information on our website? Ideally, we want a solution that’s cheap, quick and useful. Thankfully, card sorting is all three of these. The process is much like it sounds. You write down all of the discrete elements that you wish to organize onto cards, and then ask participants to collect them into groups that make sense to them. But is that all there is to it? When can it be used, and what should the outcome be?

When to Use It?

The process of organizing content is fraught with questions. Should it be grouped by type or by subject? Which category does this FAQ question belong to? Card sorting answers these types of questions and is useful in many situations. Some specific examples include:

  • classifying the products in an e-commerce store,
  • organizing questions in an FAQ section,
  • untangling a complex site map.

One of the great things about card sorting is that it needn’t be confined to client projects or even websites. After having used it for clients, we saw its value as a general purpose tool. We have started using it in our own internal meetings to incorporate feedback from our team about how to organize a particular business process or how to structure an upcoming presentation.

Ultimately, the goal of any card sort is to improve the labelling, grouping and organization of information. However, it is best suited to organizing content, and it won’t fix everything on its own. If your website is very task-focused (if it’s an airline-booking website, for example), then card sorting on its own will provide limited benefit. Best to direct your energies towards usability testing, especially if your time or budget is tight.

3-img-cardsortinternal-small-opt4
Card sorting can be useful in your own internal meetings when you need to organize something. It’s a great way to incorporate feedback from your team. (View large version5)

Open or Closed?

Card sorting sessions can be classified as one of two types — open or closed. Open card sorting is the more flexible option of the two. Here, users are free to organize the cards you supply into groups that make sense to them, and then come up with their own names for these groups. They are also free to rename cards or make their own suggestions for new cards if they wish.

This type is best when you want to understand how users would group your content. Gathering their ideas and suggestions for names and labels goes a long way to making your website more intuitive.

The alternative method, closed card sorting, is where the categories or labels are fixed. This is useful when you want to understand how users fit content into an existing structure. It’s also used when new content needs to be added to a website.

As an example, consider an e-commerce website and the top-level categories they might have for their products, such as technology, home and garden, and sports and leisure. Now suppose that the store has started stocking a new range of products that have just been launched. Which top-level category on the website should these products be added to? Involving users in a closed card sort could help you to arrive at an answer.

Sometimes you can mix the two techniques. Run an open card sort with one group of users to define the top-level categories. Then run a closed card sort using these new categories, and see how easy it is for users to fit existing content into them.

This Time, It’s Personal

Traditionally, card sorting is as low-tech as it gets, requiring no advanced technology or software. You simply write all of the items on pieces of paper or cards, spread them out on a table, and let your users have their way with them. This method is the most widely used because it’s cheap, quick and intuitive. Being in the same room as your users means you’ll be on hand to guide them through the process.

4-img-optimalsort-small-opt6
OptimalSort is an online tool for card sorting. (Image source7) (View large version8)

The focus of this article is offline sessions, but online sorting tools, such as OptimalSort309 and ConceptCodify2910, present some key advantages. Recruiting participants is easier, which makes it easier to scale up. Many feature advanced reporting tools to identify correlations and patterns, which can take a lot of time when done manually. Free tools such as Trello11 also work well for card sorting, but you lose the ability to generate reports.

The disadvantages of online services are that they are often a lot more expensive and you lose that personal touch. You’ll gain unique insight by observing people’s behavior and body language, which online sessions can’t capture.

Step By Step

1. Prepare

The first task in running an offline session is to prepare your cards. Create a document that lists all of the items you are testing, and give each one a number — spreadsheets are ideal for this. These items could be pages in a site map, product categories or labels in a taxonomy. Each item in this list then gets written on a single card, with the corresponding number written on the reverse. This numbering will help if you want to run more advanced analysis once the sessions are complete.

For the cards themselves, use actual cards instead of paper, which can get lost, worn out or torn easily. Also, don’t test too many things at once. From experience, I can say that no more than 50 to 70 items per session is about right. If you’re trying to organize a massive system, break it up into chunks, and then run sessions for each chunk.

5-img-cards-small-opt12
This is pretty much all you need. And a table. (Image source13) (View large version14)

Choosing what to write on the cards can be challenging. Ideally, the labels should be short enough that they can be read quickly, but long enough to make sense and for participants to understand what is being represented. Short titles usually make sense only in the context of the group they belong to. Therefore, summarizing the content as briefly as possible could help, rather than simply using a title.

For example, a label like “More information about our phones” would be preferable to just “More information.” The second item would make sense within an existing parent group named “Our phones,” but on its own it doesn’t make much sense.

In summary:

  • Use a spreadsheet when preparing your cards.
  • Get cards that are durable.
  • Find a balance for labels between simple and intuitive.

2. Walk Before You Can Run

If this is your first time using this technique, use it in a smaller project if you can. Organizing and analyzing the results will be easier, and it will be an opportunity to fine-tune your technique for next time. One decision you’ll need to make early on is whether to run group or individual sessions. The answer usually depends on the complexity of the system, as well as your time and budget. If you’re just starting out, get your feet wet with individual sessions first — you can always scale up later if you need to.

When you’re organizing a lot of content, groups of three users will reach consensus faster. However, they will need more moderation, and they could cost you more time and money. You also run the risk of dealing with aggressive HIPPOs, which can skew the results.

How many users should you include in a session? For the data to be useful, you will need more users than for a typical usability test. Jakob Nielsen recommends about 15 users15 to arrive at statistically useful results. Be wary of including more and more users in your tests, however, because the returns diminish as you go higher.

In summary:

  • If this is your first go with card sorting, try it on a smaller project first.
  • Groups reach consensus faster.
  • Individual sessions are easier to moderate.
  • Get around 15 participants to achieve useful results.

3. Find Participants

The next step is to find participants. For best results, find actual users of the website, especially if it’s a niche or specialized system. If you’re trying to improve the organization of a student intranet, for example, find students. For something more general, like a large e-commerce website, find users with a broad range of demographic indicators, such as age, income or technical ability.

If possible, involve your client in finding users. The client could even provide them directly — say, if you’re redesigning a staff intranet. Offering a small financial incentive, like a gift voucher, also helps to make sure they turn up.

In summary:

  • For niche websites or intranets, find existing users.
  • For more general websites, find users from varied demographics.
  • Clients are often helpful in finding participants.

4. Put It All Together

The final step in preparation is to get the meeting room ready. Get a large table or notice board — the bigger the better. You’ll also need some kind of recording system in place. This could be anything from a camcorder to a smartphone, as long as it enables you to play back the audio and video from the session. Make sure enough drinks and refreshments are on hand, too.

Once you’ve prepared the cards and your users have arrived, it’s time to run the sessions! Provide clear instructions, and let the users know you will be recording their sessions for later review. Explain that you want them to organize the cards into groups that make sense to them and that there is no right or wrong answer. If you’re running an open card sort, get some blank cards for them to write their own names once the initial organization stage is over.

While you’re running the sessions, you might need to act as a moderator. Be on hand if they get stuck (there will likely be a lot of “ums” and “ahs”), but explain that this isn’t a problem. In fact, knowing where they are getting stuck is useful because it indicates a problem with labelling. If they find some cards difficult to classify at all, then leave them off to one side and note what they are. Also, be aware that the demands on you as a moderator will increase in group settings.

In summary:

  • Record each session and take notes.
  • There is no right or wrong answer.
  • The demands on you as a moderator will increase with more participants.

5. Wrap Up

Once they have gotten as far as they can, feel free to ask some questions if you have time. You could ask them to explain their choices in more detail, what made them hesitate about this particular card, and so on.

Finally, record the arrangement they’ve made. The easiest way to do this is simply by taking a photo, but in a small room it can be hard to make sure that all of the cards are in the shot. Taking a photo isn’t always feasible, so if you have numbered the cards, then you can note which numbers were grouped together. This will also help you when you do a more detailed statistical analysis of the groupings, which is out of scope of this article.

Once that’s done, write the participant’s name on your notes and photos. To reduce any potential bias, shuffle the cards for the next user, and then invite them in.

In summary:

  • Taking photos is a quick way to record the arrangements.
  • Ask questions if you have time.
  • Shuffle the cards before each session to reduce bias.

Further Tips

  • Offering a small incentive is a good way to encourage participation.
  • When choosing what to sort, try to choose content from similar levels (i.e. category pages or individual help topics). Mixing child and parent categories is confusing.
  • Provide clear instructions. Have an idea of what you want to say before you start.
  • Provide blank cards and a marker pen for new suggestions — essential for open card sorting.
  • Try not to interrupt participants unless they ask for help.
  • It’s OK if participants can’t group everything. This is useful information.
  • Set a time limit for each session, which will make scheduling much easier.
  • In individual sessions, ensure that no one else is present. This would be distracting.
  • Always record the sessions, and take notes!

Interpreting The Results

Congratulations! You’ve just run your first card-sorting sessions, and your notebook is full of fresh insights. The next step is to interpret the results. Because this is probably your first card-sorting session, you won’t have mountains of results to sort.

For each participant, document two sets of observations for each session. The first step is to create a new document, and then transfer any notes that you made during that session. These should be qualitative observations, such as any new names that were suggested and whether the person hesitated on a particular card.

Next, note that participant’s groupings. You could simply arrange the groupings in a bulleted list in your document or show the groupings in a spreadsheet. A spreadsheet is ideal if you want to perform some advanced statistical analysis later. Various methods and pieces of software can do this for you, and the specifics of this could fill another article by themselves. The important thing is to depict the hierarchy, the parent-child relationships, that each participant created.

What to Look For

Once this is complete, it’s time for analysis. This is as much art as science. The goal is to identify trends that correlate across different sessions, and to answer some of the following questions:

  • Which items appeared together most often?
  • Which items did participants struggle to classify?
  • What new suggestions or labels were made?
  • Were any items put in more than one grouping?
  • Were any other items of interest brought up during the sessions?

If many users organized the cards in a similar way, then the job is fairly straightforward. It’s a matter of applying that same organization to your content. If you have time, then follow up with further user testing to confirm that the new structure is superior to the old one.

For IAs that are complex, users often come up with wildly different structures. You might need to involve a larger group until broad trends emerge. This is the hard part, and it might take a couple of passes to sift through the chaff and get to the good stuff. After running a few sessions, you’ll get the hang of it.

Online tools are a great help in these situations because they make statistical analysis much easier. Advanced techniques of analysis include creating dendrograms. These are tree-like diagrams that show the grouping of information within hierarchies and show how closely items are related. Some online services provide tools for making these, but they’re quite onerous and out of scope for this article.

6-img-dendrogram-small-opt16
Dendrograms represent visual groupings of information, but they are tricky to create without specialized software. (Image source17) (View large version18)

Example From A Real-World Project

Background

Recently, the team at Decibel Digital19 worked on the redesign of a major UK animal charity website. The existing website had a section simply named “A–Z,” which contained hundreds of pages. A lot of the pages were genuinely useful and included varied content such as news, help, videos and downloads. The problem was that there was little to no structure. Everything was simply mixed together and then organized alphabetically. It was the largest section of the website by far, so locating what you needed without relying on search was incredibly hard.

Upon speaking with the digital team, we realized that part of the problem was a lack of oversight. Anyone in the company was able to upload new content to this section, and they would often upload duplicate content with a slightly different name. Over many years, the content in this section grew into a chaotic mess, like an asteroid belt — and just as difficult to navigate.

Running a Content Audit

Getting into the habit of auditing content before redesigning a website is a good thing. We gathered all of the website’s pages and their URLs in a spreadsheet, along with a short description of the content — text, images, video, articles and so on. These URLs can be exported from an existing CMS, but we used a tool named Screaming Frog20.

7-img-seospider-small-opt21
SEO Spider is a nifty little utility that crawls a website and lists all of its pages and elements. You can use this list to perform a content audit. (View large version22)

Once the spreadsheet was prepared, the next step was to evaluate the content. We used a method called a ROT analysis. We checked each piece of content using the following criteria:

  • R: Is the content redundant?
  • O: Is it outdated?
  • T: Is it trivial?

Working through the website’s content like this can seem laborious, but it was actually very therapeutic. The client felt relieved once they started unravelling the content monster that their old website had spawned, which made everyone feel better about the project. Using this ROT analysis made it faster to reach consensus on choosing pages to remove or archive. Pretty soon, the content was whittled down to manageable levels. The next step was to figure out how to organize this content. Enter card sorting!

8-img-audit-small-opt23
A content audit is way more fun than a tax audit. (View large version24)

Running a Card-Sorting Session

Following on our content audit, we all felt that the existing A–Z section wasn’t really fit for the purpose, despite a lot of the content being useful and valuable. We decided to run a card-sorting session to organize the content in a way that would inform the new website’s navigation. The goal was to develop a structure that made the content browser-friendly and easily findable without the user having to rely on search.

What to Test?

The website still had a lot of pages, so we had to decide which to include in the sessions. Having too many cards to sort becomes laborious and difficult, so we decided to include only first- and second-level pages to keep things manageable. We also didn’t include utility pages, such as “Contact Us,” “Privacy Policy” and the like, which are commonly found on many other websites. Once this was done, we had about 50 pages left, which we felt was ideal to begin the sessions.

Finding Users

The next step was to find users to test, for which we enlisted the help of the client. The users of the website tended to skew to an older female demographic, so having the client’s input here was very useful. Some of the users we tested had already engaged with the client in offline marketing activity and were excited to help!

Open vs. Closed

We decided to run an open card sort because the content from the existing A–Z section was diverse, comprising news, videos, blog posts, help articles and advice. We wanted to rely on the users’ input to create labels for these content types that made sense to them. As a result, we supplied plenty of blank cards and pens for them to write their own suggestions.

During each session, we took plenty of notes, particularly about the items that users found difficult to sort and any suggestions they made for new labels that we hadn’t considered. We also recorded each session as a backup, so that we could go over the recordings later to observe anything we missed.

What We Found

At the conclusion of the sessions, we took photos of the groupings and updated our spreadsheets. We looked for quantitative data — were there any trends? Did multiple users make similar suggestions for new labels? Did any labels consistently cause users to struggle? We looked at qualitative data, too: specific comments that users made or what they said out loud as they struggled to categorize a particular card.

9-img-cardsorting-small-opt25
The results from your card-sorting sessions might surprise you. (View large version26)

Being a charity, the client relies a lot on donations and support from the public, so getting the labels for these sections right was important. We found some interesting points:

  • The website offered annual paid memberships as a means of supporting the charity, as well as the ability to register a free account on the website. These were labelled as “Register an account” and “Become a member”; however, many users were confused by the difference. We ended up changing the wording of the membership call to action to eliminate the confusion.
  • We had suggested the name “Knowledge Centre” as a label for the help content, but many users suggested alternatives. We ended up using “Help & Advice” on the website instead.
  • The charity ran monthly “Appeals” as another means of getting donations, and it also campaigned on many issues that were listed in “Campaigns.” Lacking any context, though, every user we tested struggled to differentiate these cards. We ended up incorporating the “Campaigns” section into another area of the website.
  • To indicate a desire to support, nearly every user suggested the term “Get Involved” as a major category label. We noticed this convention on other charity websites, too.

After all this was done, we presented our findings in a report. We decided not to include masses of quantitative data. While it was useful to us internally, we felt the client would be unfamiliar with the quantitative data and wouldn’t know how to interpret it without sufficient explanation.

Instead, we presented our key findings (like those listed above) in plain English, and we classified our findings as high, medium and low priority. We also included some recommendations on how to resolve the issues we found. This made it much easier for the client to identify “quick wins” with their content’s structure, and it made it easier for us to implement the required improvements.

10-img-report-small-opt27
The client doesn’t always need to see the messy details. Putting your key findings into a clear report is often preferable. (View large version28)

Final Thoughts

Card sorting is a favored technique because it’s cheap, reliable and easy to set up. It’s a great way to become familiar with concepts such as information architecture and user-centred design. Remember that it’s not a silver bullet, and it won’t fix all of the problems on an existing website. A website might be performing poorly or be hard to use for many reasons, and improving the IA might address only some of them. However, when used in tandem with other user-centered design techniques, it can go a long way to starting off a project or redesign on the right foot.

Hopefully, you have enjoyed learning about card sorting. When implemented well, it results in a product that is intuitive and easy to navigate. If you’ve made it a part of your own process already or you have anything to ask or share, please join the discussion in the comments section.

Other Resources

(il, al)

Footnotes

  1. 1 https://www.flickr.com/photos/10ch/3347658610
  2. 2 https://www.flickr.com/photos/10ch/3347658610
  3. 3 http://www.askahippo.com/
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/09/3-img-cardsortinternal-lrg-opt.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/09/3-img-cardsortinternal-lrg-opt.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/09/4-img-optimalsort-lrg-opt.jpg
  7. 7 http://www.optimalsort.com
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/09/4-img-optimalsort-lrg-opt.jpg
  9. 9 http://www.optimalworkshop.com/optimalsort.htm
  10. 10 http://conceptcodify.com/
  11. 11 https://trello.com/
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/09/5-img-cards-lrg-opt.jpg
  13. 13 http://www.shutterstock.com
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/09/5-img-cards-lrg-opt.jpg
  15. 15 http://www.nngroup.com/articles/card-sorting-how-many-users-to-test/
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/09/6-img-dendrogram-lrg-opt.jpg
  17. 17 http://www.optimalworkshop.com/
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/09/6-img-dendrogram-lrg-opt.jpg
  19. 19 https://www.decibeldigital.com/
  20. 20 http://www.screamingfrog.co.uk/seo-spider/
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/09/7-img-seospider-lrg-opt.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/09/7-img-seospider-lrg-opt.jpg
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/09/8-img-audit-lrg-opt.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/09/8-img-audit-lrg-opt.jpg
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/09/9-img-cardsorting-lrg-opt.jpg
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/09/9-img-cardsorting-lrg-opt.jpg
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/09/10-img-report-lrg-opt.jpg
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/09/10-img-report-lrg-opt.jpg
  29. 29 http://conceptcodify.com/
  30. 30 http://www.optimalworkshop.com/optimalsort.htm
  31. 31 http://www.nngroup.com/articles/ia-vs-navigation/
  32. 32 http://shop.oreilly.com/product/9780596527341.do

The post Improving Your Information Architecture With Card Sorting: A Beginner’s Guide appeared first on Smashing Magazine.

How to use UI design patterns

Go to Source

thumbnailDesign patterns are optimal solutions to common design problems. As common problems are tossed around a community and are resolved, common solutions often emerge. Eventually, the best of these rise above the din, self-identify, and become refined until they reach the status of a design pattern.

I wouldn’t call a design patern a trend in web design, design patterns seem to be more about looking at how common designs are classified in retrospect, rather than forging new territory or looking to where things are headed.

How should you approach UI design patterns?

We use design patterns all the time, if you’re unfamiliar with them you probably haven’t realized that they’re all around you.

What about the classic example of having too much content to display on one page? We turn our attention to ‘Tabs’, a design pattern that enables us to serve all the content we want, without making the user disappear in a sea of links.

The typical benefits for using a design pattern include:

  • showing beginners how to use best practices in web design;
  • learning to adapt to collective understanding of designers;
  • allowing for better communication, reducing the risk associated with unfamiliar choices;
  • reducing the necessary time and costs  workflow to carry out specific tasks;
  • avoiding wasted time on building something that’s been built before;
  • giving the user an experience that he’s familiar and experienced with (the nature of design patterns).

How to use UI design patterns

In the above example we see Clicky Media using two very popular design patterns today:

  1. Navicon — a universal symbol for menu, otherwise known as site navigation, is becoming increasingly popular in modern web design, but has already been fully adapted to mobile devices.
  2. Parallax Scrolling — a unique design pattern that enables single page website, with an easy to use scrolling mechanism, but also includes a list of background sprites that give the page a lively feel.

Even though both the Navicon menu, and the general menu on top of the page share similar choices — it would be very distracting to include all of the links on the same header bar — it becomes clear that small choices can make a big difference.

Here’s what you need to think about when evaluating a design pattern and adapting it to your own needs:

  1. Problem summary: what user problem are you solving? Stay focused, and phrase it like a user story – in one sentence only.
  2. Solution: how have others solved this problem? A few things to detail include user navigation (including shortcuts), getting user inputs, dealing with data and integrations with other services or applications, and displaying information and content (including defaults).
  3. Example: great, can you show me? Sometimes a screenshot or mockup is sufficient; other times, user flows and/or additional notes are necessary to clearly communicate the pattern.
  4. Usage: when should this pattern (not) be used? A few things to detail include product architecture, interface layout, device(s), programming language, absence or existence of other design patterns, type of user, and primary use cases.

It takes practice and discipline to think about patterns in this manner if you haven’t yet been doing it. Take the time to answer these questions when designing your product because it could help you save a lot of time refactoring down the road when the your users and team ask for similar details.

 

The rise of UI toolkits

UI design patterns have always been about making it easier for the user to navigate your website, application or system. If the user learns how to submit a comment for the first time, chances are he will instantly know how to send you an email using the contact form, it’s the same repetitive concept of information input.

In the recent years, we’ve seen an enormous growth in the UI toolkit market. A UI toolkit can be simply understood as a set of widgets that let you build a fully graphical application from scratch. Twitter Bootstrap is a perfect example of a successful UI toolkit. These days, a large proportion of web designers will rely on Bootstrap features to ease their own workflow. In a sense, there is no need to reinvent the wheel!

 

3 UI design patterns to remember

In short, design patterns are solutions to recurring problems. By utilizing patterns we can overcome simple user interface problems. If we pay close attention, we notice that patterns are all around us. There is nothing special about that specific design, it’s the way it has been applied that you’re excited about!

Crystal Clear Calls-to-Action

The simplest of web forms (and also, the most common ones) will usually have just a single actionable button: in this case ‘Create Website’. It’s pretty self-explanatory, which is the point.

How much more easy could it get, right? Always go for the easy option, don’t reinvent the wheel just to stand out from the crowd.

How to use UI design patterns

 

Breadcrumbs to the rescue

Breadcrumbs show the path from the front page of the site to the current location of the user in the website’s page hierarchy. They are a form of secondary navigation that helps users understand the hierarchy and structure of the website. Breadcrumbs start with the home page and end with the page currently being viewed.

In this example by Fares Farhan, we see how he utilizes two UI design patterns at the same time. First, he has got the tabs pattern on top, and second the breadcrumbs navigation pattern on the bottom. By having combined them together he makes for a very pleasant browsing experience.

How to use UI design patterns

 

Registration should be easy

Unless you’ve been living under a rock, you’ll be aware of social registration. Registration to a website is a common thing to do, and so should be made as easy and pleasant as possible.

This is one of my favorite registration pages at the moment. It’s the GitHub homepage, and as you can see in the screenshot everything that company stands for is presented in less than hundred words. You also have the ability to register on the go, and the process takes less than a minute to complete. You’ll get an email to verify your account, but that is something that we’re used to anyway!

How to use UI design patterns

 

Final Words

I’ve built websites for over eight years and during those eight years I’ve realized that simplicity is the key to many design problems.

I have come to a conclusion that clutter in design, bloated with unnecessary elements and forms is the most frustrating experience that you can find on the web. Yes, design is exactly how something works, so why not make it work properly? User interface (UI) is incredibly important to the success of your business or venture.

The best way to ensure you are designing successful sites is to learn from and utilize existing design patterns.

25+ Premium WordPress Themes from Zappy Themes – only $37!
How to use UI design patterns

Source

Collective #138

Go to CODROPS [source]</a

hotjar

Hotjar Insights

Hotjar Insights is a new and easy way to understand your web and mobile site visitors. You can request free early access for the platform.

Check it out

Collective138_inspiration

Palettab

Palletab is a Chrome extension which uses Google fonts and ColourLovers palettes to create inspirational combinations whenever you open a new tab. Made by Tim Holman and Claudio Guglieri.

Check it out

Advertisement

Collective138_progressbarjs

ProgressBar.js

Beautiful and responsive progress bars with animated SVG paths. You can use built-in shapes or create your own paths. Made by Kimmo Brunfeldt.

Check it out

Colective138_lazy

Lazysizes

Lazysizes is a fast and jank-free lazy loader for images (including responsive images), iframes and scripts/widgets without any dependency. Made by Alexander Farkas.

Check it out

Collective138_devtoolstips

DevTools Tips

DevTools Tips by Jeferson Koslowski is a curated collection of Chrome Developer Tools tips and tricks, updated at least once a week.

Check it out

Collective138_MaterialIcons

Material Design Icons

Material Design Icons are the official open-source icons featured in the Google Material Design specification.

Get it

Collective #138 was written by Mary Lou and published on Codrops.

Our favorite tweets of the week: October 13, 2014 – October 19, 2014

Go to Source

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Fibonacci Grid System Icon Design http://bit.ly/1wdnm3Q

 

Dealing with Burnout as a Web Designer http://bit.ly/1ns5C4U

 

.@FastCoDesign: Announcing The Winners Of The 2014 Innovation By Design Awards http://bit.ly/1vikg07

 

Introducing a new audio experience on Twitter http://bit.ly/1vB0b6A

 

9 traits of a great designer from @CreativeBloq: http://bit.ly/1xYk85g

 

New feature for Facebook Pages? Listings of “Valuable” & “Irrelevant” fans http://mklnd.com/1wPniqR  via @marketingland

 

Dyson’s 20 Best Inventions of the Year http://bit.ly/ZFXrag  via @Gizmodo

 

6 questions every homepage should answer http://bit.ly/1ytoSD2  via @CreativeBloq

 

Creating Your First Prototype with Framer http://bit.ly/1vharzp

 

Scarily superb illustrated tributes to classic horror movies http://bit.ly/1tsLHp7  via @CreativeBloq

 

Organizing tech conferences: A study of what tends to work, and what doesn’t http://bit.ly/1u0WxNx  via @smashingmag

 

Introducing the HTML5 “Menu” and “Menuitem” Elements http://bit.ly/1oafwJ2  via @tutsplus

 

How writing will make you a better designer http://bit.ly/1wFUHUM

 

How to start a startup without ruining your life http://bit.ly/1Cksg0x

 

8 Formatting Tips for Creating the Perfect Book Design http://bit.ly/ZC9bdV

 

Why don’t you use Bootstrap? http://bit.ly/1qTnyk1

 

Startup Crunches 100 Terabytes of Data in a Record 23 Minutes http://wrd.cm/1tpvJMy  via @WIRED

 

10 principles of good design http://bit.ly/1yyBrNm

 

How side projects saved our startup http://bit.ly/1w3AOcf

 

Design Agency Homepage is a live feed of the office http://bit.ly/1b1VB8t

 

How to use WordPress shortcodes in page/theme templates http://bit.ly/1EPaGWv

 

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

LAST DAY: 115 Hand-Sketched Vectors + 12 Logo Templates – $10!
Our favorite tweets of the week: October 13, 2014   October 19, 2014

Source