BlogmyQuery – BMQ

As web design matures, so do the tools used for web pages. As with any industry there are standards that are widely accepted and used. There are also trends that become popular over time. Modal boxes have recently become a popular tool for Internet marketing websites.

Trends

Internet, network and MLM marketing is big right now. With the recent recession, more people are either out of work or looking to make extra income. This business model revolves around offering expertise or informational products that are easy and cheap to reproduce – to others for a fee. The way to really make money in this type of business to not only increase traffic to your website, but also to convince people to ‘opt-in’ to your email list. This basically gives Internet marketers permission to advertise, instead of spam, a large group of people.

The main reason modal boxes are such a trend right now is that they offer an easy, fast and in your face way to encourage web page visitors to sign up a site’s marketing list.

Modal Box or Window

So what is a modal box exactly? Basically, it is a mini window that comes up when a user visits a website that requires the user to do something before the main page is accessible. They can be used for a variety of purposes – including asking for the user’s personal information, stating emergency or error messages, or to show an item more closely and with greater detail.

Modal vs Pop Up

Of course, the modal box probably sounds very similar to the dreaded pop up boxes scammers and Internet advertising companies are known for. The pop up is such a dirty word in web design that all the Internet browser companies now include features that will block all of them for you.

So, what is the difference between a modal box and a pop up? Technically, they are both miniature windows that ‘pop up’ when you visit a website. However, annoying pop ups are typically used to force advertising onto web traffic or to keep a person at a website longer than they intended to stay. This is why they are so dreaded – the pop ups are distracting, unwanted, time wasting elements of web design.

A modal box, on the other hand, can be welcoming and effective if planned and used to benefit the visitor and not the site owner. For Internet marketers, it is used as a way to encourage visitors to sign up for their email lists. A great Internet marketer then uses these permission based lists to send valuable information to those who signed up. Or a modal box can be used to better display inventory so that customers shopping online can get a real sense of their purchase before committing. Maybe there is an important part of the website that the owner wants to draw attention to? It can also be used to protect a page by requiring a user ID and password before permitting access. A modal box should not pop up randomly and should have purpose.

Design

In order to create a modal box, many users incorporate Javascript, CSS, XHTML and AJAX programming. This means the new web designer will need to have a bigger understanding of design than just basic HTML to pull off a good modal box.

Drawbacks

Of course, user traffic has a limited time span. With statistics stating that the average Internet surfer spends mere seconds on a web page – incorporating a box that requires interaction to go away could mean the website will lose traffic. No matter how well a web designer and site owner justify the modal box – some people will cruise on instead of interacting with the box to make it go away. Some users argue that the modal box is just a fancy upgrade from the pop up and is still undesirable. This is a drawback to using the modal box in your design.

Also, overuse of the modal box on a website will make users naturally compare them to the annoying pop ups of old. The overuse of any design element is unappealing and will affect your site in a negative manner. On top of that, spammers have caught on to the appeal of the modal box and are increasingly using this tool to trick visitors into believing what they offer is more legitimate or interesting. As time goes on, the modal box will become just as offensive as the pop up and something new will be created to fill this need instead.

How do you feel about modals windows how do your feel they are better or worse than traditional pop-ups, please discuss in the comment we would love to hear your perspective.

The post Modal Windows – Good Practice or Just Glorified Pop Ups? appeared first on Design Reviver.

As bloggers, wanna-be writers and hopeful freelancers, we hear, probably on a daily basis, just how important guest blogging is. We know we should be guest blogging which means we know we should be actively seeking out new blogs and new sites as potential homes for our precious content. And usually, considering we’re “writers,� we think we’re fairly good at putting words on a page and drafting an informative, helpful, hopefully even mildly entertaining piece of work. After all, we can write all day long, but if it doesn’t offer benefit to a site or to a blog, there is no site manager (no matter how burnt out or desperate for content), who is going to put that on his beloved page. And we can’t blame him. Those of us with our own blogs know how thin the line is regarding how willing we are at approving content and promoting it on our site. (...)
Read the rest of Good Blogging Etiquette for Guest Posting Hopefuls

© Tutorial Blog, 2011. | Buy iPhone Accessories | iPad App Reviews

The world of mobile app development is quickly becoming a crowded and complicated space, especially for those outside of the development niche.

“Which development platform should I use?� “Do I go native or Web-based?� “Which devices should I plan for?� “Can I build my mobile website by hand or should I use a pre-built package?�

The questions are endless.

As a designer, my job is to help my clients answer these questions. I try to stay in the category of “knowing enough to be dangerous,� and I keep tabs on the latest mobile development trends, one being the growing popularity of mobile Web apps.

What Is A Mobile Web App?

A mobile Web app is an app that you access via a mobile browser (such as iPhone’s Safari). It is not a static mobile website. It is designed to work like a native app, but it is not accessible via the App Store or Android Marketplace. You pull it up right from the browser.

Why Create a Mobile Web App Instead of a Native App?

Deciding whether a native or Web-based app is best for your client comes down to the audience they are trying to reach. Mobile Web apps are a good fit if:

• Your audience is searching for you primarily from a mobile Web browser;
• Users are on a multitude of devices (iPhone, Android, BlackBerry, etc.);
• The development team has more skill in HTML, CSS and JavaScript than Objective C, Java, etc.

How To Design A Mobile Web App

Those of you who have designed iOS native apps are used to fixed-width and -height images that are positioned and aligned in the Interface Builder (or using code). Designing mobile Web apps is different: you’re designing for the browser again, just as you would for a typical website.

What does this mean? It means you can take advantage of a lot of cool CSS design tricks. In many cases, you can design an entire interface using CSS instead of images.

Technology Analysis: jQTouch or Sencha Touch?

To help you determine which development platform best fits your project, I’ve done some research on two Web technologies that focus on mobile Web apps: jQTouch and Sencha Touch.

jQTouch is powered by jQuery, a highly popular JavaScript library, and is geared to Web designers and novice Web app developers. jQTouch progressively enhances HTML and CSS so that less capable phones are still able to browse content. The primary method of creating functionality in jQTouch is with HTML and CSS or with jQuery-style event callbacks.

Sencha Touch, on the other hand, is geared more to software developers and has a pure Javascript API for building powerful apps. It is powered by a custom core that is optimized for mobile, which inherently makes the core level in Sencha Touch lighter and better optimized than that in jQTouch. It offers a wider array of features and components and is better suited to mobile developers who are creating apps with advanced layouts, functionality and interfaces.

For myself, I wanted an interface that looked and felt like a native app as much as possible. I decided to go with the Sencha Touch development platform because of its ability to handle advanced layouts and interfaces.

Ultimately, you have to do your own research and answer these questions:

1. What kind of functionality does the app need?
2. What technology supports that functionality?
3. How do the costs of these technologies compare?
4. What can I afford?
5. Do I know of high-quality developers of this technology?

Once you have this data, you can make an informed decision on the technology platform for your project.

Where Does This Leave Us Non-Coding Designers?

If you fall squarely in the category of designer, don’t worry. You can still design the interface in Photoshop, as I did in the example below. I leave the CSS beauty to the experts, letting them translate my images into code that looks exactly like my design.

Example Project: The Roookies App

Now, I’ll cover a practical example of how to create a mobile Web app using Sencha Touch. I teamed up with Sencha’s CTO, James Pearce, to design an app called Roookies. Roookies helps Dribbble newbies gain exposure on the network by featuring only rookie artwork.

I designed the Roookies app as I would a native application, using a 640 × 960 iOS design template found on Tapptics. This gives my developer a reference when they create the CSS code that will mimic my images. And for any images that cannot be duplicated via CSS, my developer will slice out and insert transparent PNGs.

Coding the Roookies App

Now I’ll demonstrate how to use CSS, Sass and Compass to style and theme mobile Web applications built with HTML5 and the Sencha Touch JavaScript framework.

An Introduction to Sass and Compass

Sass is an extension of CSS that adds new syntax to allow for things like variables, mixins, nesting, and math and color functions. This makes it much simpler to create CSS that is easy to maintain and that doesn’t repeat itself.

For example, in Sass we can write the following:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}

.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

When we compile it to CSS, the output will look like this:

.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}

.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}

This is extremely powerful, because it means we can potentially change color schemes, layouts and more with one set of simple parameters — and assuming that the Sass has been structured well, those changes will cascade throughout all of the resulting CSS. (You can do much more than this, and you should check out the Sass website for more information on how the language works.)

Compass is an extension to Sass, and it provides a whole set of CSS3 mixins and an extension system. It’s particularly useful for handling cross-browser CSS prefixes. Take this:

$boxheight: 10em;
.mybox {
@include border-radius($boxheight/4);
}

This will compile to the following CSS:

.mybox {
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
-o-border-radius: 2.5em;
-ms-border-radius: 2.5em;
-khtml-border-radius: 2.5em;
border-radius: 2.5em;
}

You can learn more about what Compass brings to the styling process on its website.

Using Sass And Compass With Sencha Touch

Sencha Touch is an HTML5, CSS3 and JavaScript framework that allows you to develop mobile Web apps that look and feel native on iPhone, Android and BlackBerry touch devices.

Because the framework uses Web technology to create apps that run in the browser, these apps can easily be themed using tried and trusted CSS. And because Sencha Touch uses Sass and Compass, we can use these techniques to also create beautiful and elegant themes for mobile applications that were built this way.

For this article, we’ve built a simple Sencha Touch app called Roookies. It uses a JSON API to create a gallery of shots by first-time users of Dribbble, a popular design showcase service. (While we won’t get into how the app was built, you can read a sister article about how it works.)

To follow along here, we recommend you grab a copy of the app’s source code, because it also includes the theming components you’ll need. It’s hosted on GitHub, so you can either fork that repository or simply download it as a ZIP file. An unthemed version of the app is also hosted online; you can try it out with a touch device or a WebKit-based desktop browser.

Before you do any theming on this app, you’ll need to install Compass (which has Sass built in). The command line tool itself is Ruby-based, which means that Ruby is a dependency. If you’re a Mac user, Ruby is already installed on your operating system, and the easiest way to install Compass is as a Gem from the command line:

> sudo gem install compass --pre

(We use the --pre flag to ensure that the latest and greatest version of Compass is installed. Sencha Touch requires version 0.11 or later.)

If you are on Windows or a system that doesn’t have Ruby already installed, then you’ll need to install Ruby and Gem first, using something like RubyInstaller for Windows.

How Sencha Touch Uses Sass

Each component of the Sencha Touch user interface library has its own Sass file, which you can easily take and edit. But sometimes, the easiest changes can be made by altering certain important Sass variables (as we did in the examples above) to make changes globally across the application’s theme.

In the Roookies application, you’ll find a folder named theming. In it, create a new Sass file named mytheme.scss. The .scss extension is the convention for Sass files. In this file you can link to the parts of the Sencha Touch theming system that are used in the Roookies application:

@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-list;
@include sencha-layout;
@include sencha-loading-spinner;

The first line links to all of Sencha Touch’s sub-theming files, and the subsequent lines call mixins for the UI elements used in our application. Mixins are really just functions: they basically insert blocks of CSS into your document.

Most of these mixins use a set of global variables to alter the appearance of different parts of the user interface. For example, the $base-color variable modifies the overall color of the application. Set the following variable before the @includes so that they all use this new value, a tasteful green:

$base-color: #709e3f;

@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
…

When you save that file, you will be good to compile the CSS. In the same directory, run Compass on the command line, like so:

> compass compile mytheme.scss

If all goes well, Compass should output the mytheme.css file in the same directory. As with all websites and apps, you’ll need to reference this new CSS file in the application itself. You can do this either by adding a magic query string to the Roookies application URL (something like http://myserver.com/roookies?style=theming/mytheme.css) or, more traditionally, by hardcoding the reference into index.html:

<link rel="stylesheet" type="text/css"
href="theming/mytheme.css"/>

(If you do hardcode the theme like this, you should remove the script block in index.html, which is responsible for supporting the query-string theme-switching technique.)

If all goes well, the theme should now appear with the new color, both in the toolbar and in a lighter shade for selections of the list itself:

(The fact that the color of the list selection is derived from, but not exactly the same as, the base is another clever Sass trick. Color functions such as darken and saturate allow you to formulaically link color values.)

Sencha Touch has a full list of the variables that can be altered to change the look and theme of an app.

Embedding Regular CSS

If all this talk of Sass and Compass is confusing, the good news is that even an .scss file can contain regular old CSS, too. So, in addition to your variables, mixins and functions, you can just start doing static styling to finesse the theme.

Let’s say we want to frame the images in the list. In the Roookies app, all of the images have the HTML class attribute shot-image, so we can easily style them as normal:

img.shot-image {
display:block;
padding: 8px;
margin: 0px auto;
border: 1px solid #666;
-webkit-box-shadow: 0 0 4px rgba(#333, .5);
background:#eee;
clear:both;
width:304px;
}

Also, the container in which each image is placed is a div with the class shot, and we can easily adjust its padding so that our framed image still fits well within the list’s width:

.shot {
padding: 8px 0!important;
}

One useful way to find out the classes of elements in a mobile Web application is to use the inspector tool in a WebKit-based browser such as Chrome. Right-click on an element to inspect it and see how it looks in the browser’s DOM:

Add these to the bottom of the .scss file and compile again. The app’s images should now have more subtle styling, making the gallery look slightly smarter:

Embedding Images In CSS

One consideration when building mobile Web apps is the number of requests that the browser needs to make to the server to display a page. And it’s often the case that CSS points to external files, such as images, in the theme. One thing that is very easy to do with Compass, though, is to embed images in the CSS itself, using base64 encoding inside a “Data URL.� These are URLs that start with data and that allow you to specify binary resources inline. This means that the entire theme is encapsulated in one file, and the device has to make only one request to the server to receive all of the parts.

The inline image function is an easy way to do this. In our theming environment, it pulls in images from the images sub-directory. So, the wood.jpg image in that directory can be embedded in the CSS as the background of the gallery, like so:

.shot {
background:inline-image("wood.jpg", "image/jpg");
}

In the resulting CSS, it appears like this:

.shot{
background:url('data:"image/jpg";base64,/9j/4AAQSkZJR…');
}

This gives the app a tasteful wooden background:

Font Support

Many current mobile browsers support Web fonts, and there’s nothing like a custom typeface to distinguish your mobile application. One of the easiest ways to put a Web font on a website or application is with Google’s WebFont service, which requires you to declare an extra CSS rule by linking to your chosen font in the index.html file:

<link href='http://fonts.googleapis.com/css?family=Pacifico'
rel='stylesheet' type='text/css'>

You can also use the CSS @import rule to pull this into the .scss file itself:

@import "http://fonts.googleapis.com/css?family=Pacifico";

Both of these techniques create an @font-face rule that allows you to use font-family:'Pacifico' anywhere in your CSS.

Below, we’ve applied a style to the user interface — in this case, the text in the toolbar, which uses the class x-toolbar-title:

.x-toolbar-title {
font-family: 'Pacifico';
}

The result is as follows. A little quirkiness in the title bar and a distinctive look and feel to our application.

Conclusion

Of course, we’ve just scratched the surface here. There are many more powerful (and dramatic) ways to style and theme a mobile Web application. We’ve continued this process to create a fully featured theme for the Roookies app, and you can see the results for yourself, including the styled image meta data and the styled details page when you click on an icon under the images. You can also see the complete .scss file that was used to create this theme; it’s distributed as part of the GitHub project.

Have you created a mobile Web app with an extraordinary design aesthetic? Let us know in the comments section below!

Mobile Web App Resources

• “Will Mobile Web Apps Eventually Replace Native Apps?â€�
• “Mobile Web vs. Native App: Give It a Restâ€�
• “Mobile Web vs. Native Appâ€�
• “How Mobile Web Will Prevail Over Native Appâ€�
• “Web App Masters: Native or Web-Based Mobile Apps?â€�

(kw)

© Jen Gordon for Smashing Magazine, 2011.

In the past we have presented our readers with some inspiring and well designed infographics to demonstrate this useful presentational route that many are taking these days for content delivery. By taking statistical data that would normally be dry and otherwise lacking, and designing the information in such a way that it becomes not only more digestible, but also exciting and somewhat interactive. Today we are doing it again!

Well Designed Data

The foursquare community has over 10,000,000 members!

Adding Play Into the Enterprise

The Darwinian Evolution of Photoshop

How to Avoid an Online Customer Service Fiasco

The Most Popular Design Blogs by Twitter Followers and Facebook Fans

How a Phone is Phished

The Infographic of Infographics: How Infographics are Made

America According to Twitter

Web Developers vs. Web Developers

Defending Your Privacy: Which Social Networking Sites Are Secure?

App Store Milestone: 500,000 Applications Approved

Sitting is Killing You

Which Designer Job is the Best?

Coffee Drinks Illustrated

Demand Media Breaking the Bank

Mac vs. PC: A Hunch Rematch

What Your Web Design Says About You

Web Design Evolution: Two Decades of Innovation

How facebook is reshaping college admissions

Graphic Designer’s Journey: Freelance To Freedom

April Fools 2011: Pranks Around The Web

All You Need To Know About Web Designers

The Complete iPhone 5 Rumor Roundup

Google’s Collateral Damage

Mobile E-Commerce Infographic

Lists Are Dead. Long Live the Blog Tree

Women in Business

World Without Apple

Different Types of Designers and Developers

The Colors of the Web

(rb)

A positive first impression is essential to relationships. People look for trust and integrity, and they expect subsequent encounters to reflect and reinforce their first impression. The same principles apply to brands and their products. Design plays an important role in building lasting relationships with end users and, thus, in supporting the brand’s promise.

Users expect mobile services to be relevant and user-friendly and to perform well. The limitations of the medium, however, impose significant challenges to designing products that meet all of those expectations. While often underestimated, performance is a crucial contributor to a trustworthy mobile user experience. Therefore, it should be considered a key driver in the design process.

In this article, we’ll discuss performance in relation to design and present seven guidelines that can help shape design decisions related to performance while accounting for the needs of end users and businesses. These guidelines are based on the experiences of our teams in designing native mobile apps for a broad product portfolio and on multiple mobile platforms.

Performance For Mobile

People use their mobiles to enhance productivity, comfort and pleasure, everywhere and at anytime: waiting for the bus, walking on the sidewalk, checking which platform their train leaves from. Mobile applications need to focus on a core utility, and they need to be fast and reliable in order to be valuable in those environments.

Paradoxically, we’ve noticed that many mobile design cycles start with requests for great aesthetics first: “It has to look amazing!� Of course, stunning visuals will attract customers by making a great first impression. However, a long-lasting relationship depends on the quality of each encounter, which is also heavily influenced by how the app performs. An application that looks stunning but performs poorly can damage integrity. Users quickly notice software that is slow or likely to break (whether because of downtime, crashes, etc.), and this impairs both usage and brand perception. Users expect an app to be fast and responsive. If it’s not, it will get poor reviews, low ratings and low adoption numbers.

The visuals in the Twitter app are not as rich as Cookmate’s (which are stunning), but reviews for the Twitter app in the App Store are much better.

Performance Supports Brand Differentiation

Every product encounter affects the brand perception. Users are looking for the best tools to enhance their lives. To attract a significant user base in a landscape that is becoming more populated each day, a mobile app has to stand out. It should do something no other app does, or do it better than others do. These benefits reinforce the brand. Because performance is an essential element in the user experience, it directly helps to differentiate the brand. Taking this one step further: making a technically challenging feature perform smoothly will give the product a unique selling point, one that will be difficult to imitate.

A good example is the Flickr iPhone app. Flickr states on its website that it has two main goals: to help people to make their photos available, and to enable new ways to organize photo and video. Guess what? That is exactly what its app does well, thus fulfilling its brand’s promise.

Flickr does a good job of optimizing the key brand encounters.

So, when planning an app, it is worth analyzing the market and trying to answer two questions. (1) What should it do differently from its competitors? (2) What should it do better than its competitors? Then, focus your design and development efforts on the resulting top three goals.

A Key Design Exercise

Crafting products of any kind requires an appreciation of the way they are built. Well-established design and engineering disciplines have recognized this for a long time. A car’s design influences its aerodynamics. A beautiful eye-catching bridge has to cope with wind and with traffic passing over and beneath it. The same applies to interactive mobile services. Design choices affect features, content, interactivity, graphics and, therefore, performance.

We’ve noticed on several product teams that performance is believed to be exclusively the responsibility of developers, and therefore it is considered too late in the design process. But in order to assess feasibility, development needs to be considered during the creative process. Applying the seven guidelines below and considering relevant factors for mobile UI (see the next section) up front will help to incorporate the topic of performance into design discussions. Achieving a high-performance experience is not just a coding exercise. It is a key design exercise.

The Erasmus bridge in Rotterdam, the Netherlands. (Image: Wikipedia)

Relevant Factors In Mobile UI Performance

The perception of performance is based on start-up time, page-loading behavior, smoothness of transitions and animations, errors, and waiting times. The diagram below illustrates these factors: the “app� (with its graphics, interaction, content, features and code) runs on a “mobile� device with certain technical capabilities (CPU, screen size, etc.) and a platform (Android, iOS, etc.). In many cases, the app connects over a “network,� with a set coverage and standard (LTE, 3G, 2G), to a “back end.� The two factors at the top are heavily influenced by the decisions of the design and development team. The bottom two factors are constraints that need to be taken into account.

Factors that influence performance.

Decisions for each factor will affect performance. Any combination, enhancement (such as advanced visuals) or limitation (such as poor network coverage) could increase complexity. For example, content being loaded from the back end in addition to advanced graphics traveling over a slow network are a combination of factors that will reduce performance.

Seven Guidelines

The last years have seen dramatic changes in the mobile platform landscape. New UI paradigms have emerged, screens and processors are becoming as advanced as desktop computers, and input mechanisms have been revolutionized.

Within these shifting constraints, designers should always try to create a look and feel that is cutting-edge, memorable and high-performing. This is not just a matter of reducing image sizes. Decisions made at various levels of the design and the design process will have a significant impact. Let’s look at seven guidelines that have proven to be helpful tools at all design levels to achieve high-performing mobile user experiences.

1. Define UI Brand Signatures

Each user interaction with an app should reflect the story of the brand and should increase recognition, loyalty and satisfaction. Identifying which elements contribute most to the brand’s identity is essential. Examples are features, visuals, wording, fonts and animations. Our design teams work on many different products on different product teams. This could easily lead to several design and implementation variations of similar UI elements. Defining the core building blocks encourages reuse and discourages reinvention and, therefore, optimizes the design and implementation of a set of components.

One approach is to define the UI elements that form the core building blocks of the user interface and, together, to create the interface’s unique character. In the concept phase, identify those elements that do the following:

• Differentiate the app (for example, the photo-viewing feature in the Path app);
• Represent key functions (for example, a check-out feature for a store);
• Set the pattern of the design language (for example, the header in the screenshot below).

Windows Phone 7’s Metro UI is a great example of how fonts, layout and interaction can establish a unique design DNA. (Image: Wikipedia)

The core signature elements need to be the most responsive. They will be seen by users over and over and will be reused in different product features. By focusing the design and implementation on this set of elements, each optimization will pay off multiple times.

2. Focus the Portfolio of Products

Whether a company wants to launch a product quickly, or develop a product portfolio (i.e. multiple products on one platform, the same product on multiple platforms, or both), or if facing limited time and resources, hard choices have to be made. Design and optimization efforts should be targeted at those products in the portfolio that matter most. A design priority matrix helps us understand where design efforts will pay off the most.

Example of a design priority matrix.

Focusing design efforts helps to optimize performance in the most rewarding areas. For example, if most of your anticipated customers are using Android phones, and competitors are also targeting them, dedicating more design effort to creating an elegant and fast Android app would be more valuable than dividing your efforts equally across all platforms.

3. Identify the Core User Stories

Our teams have faced several project kick-offs in which the initial list of requested features was lengthy, unfocused and impossible to build within the requested timeline. When dreaming up what a product should do, companies often lose sight of the fact that customers look for solutions that help them with very particular needs.

For example, one main shopping goal (besides socializing, inspiration, etc.) is to find and purchase a product. Whether in a small city, on Oxford Street in London or on the Internet, it’s about finding and buying what you’re looking for. The experience could be enriched to make shopping more fun, but the core goal — finding and purchasing — should never be lost. The same applies to the design of a shopping app (whether for games, music, vouchers). The user needs to be able to find and purchase quickly, regardless of whatever other functions that enrich the overall experience.

The illustrations below show two designs for a product detail page in a store. The left screen has advanced shopping features, such as gifting, related products and detailed reviews. The right screen is more focused on purchasing. Implementing the right screen will optimize the company’s story, and the team won’t get distracted by designing and implementing side features. Only when the basic core functionality is optimized can enrichment features be added, as long as they do not hinder the core user stories.

Two kinds of purchasing screens.

During the product definition process, the core user stories should be identified in order to focus the design and development efforts.

4. Optimize UI Flows and Elements

Users don’t like to wait. (Google puts “Every millisecond counts� as the second principle of its user experience.) Optimizing individual screens, flows and UI elements will reduce waiting times and keep users from thinking that they’re wasting their time.

A. Speed up perceived performance
The designer cannot control performance all of the time. The network might be slow; the device might be running other tasks in the background; certain operations might require a lot of calculation. If the user at least perceives that they are not losing time, then the app will make a solid impression. Design can help communicate this, even during unexpected delays.

The first step is to identify flows that will likely have delays (fetching back-end data, performing a lot of calculations, etc.). The second step is to guide users through these delays by introducing additional steps that they would perceive as being necessary (showing loading animations, displaying useful tips, etc.).

The following set of images shows possible steps in a content search:

The user here experiences four steps:

1. Hits the search button.
2. Sees a loading animation.
3. Sees the first part of the list, with textual content and placeholder images (which could be stored in the app itself).
4. Sees the actual thumbnail images appear.

The user experiences short steps, rather than jumping directly from step one to four, and so perceives progress rather than delay.

Another example is when an app starts loading up. By first displaying a picture that matches the application’s layout, the user gets the impression that the app is loading more quickly. The screenshot below illustrates this; however, the perceived performance could be sped up even more by adding a simple progress notification in the blank space of the first screen. This would avoid the impression that something is waiting to be loaded. (In case of a slow connection the app does show a loading notification, thereby communicating progress to the user for that situation).

The Facebook app for the iPhone loading up.

B. Optimize individual UI elements
Every UI element affects performance. And because every optimization contributes to overall performance, all UI elements should be considered. Key aspects to look at are:

• Elements on screen
  The number and type of UI elements on the screen will affect the performance of that screen. For example, media items (audio, video, maps) will affect performance more than simple elements (static images, etc.).
• Element characteristics
  The characteristics of an element, such as its resolution or image depth, affects drawing time. For example, on Android, each drawable resource (JPG, PNG) is decoded to bitmap format, so each optimized image will result in fewer kilobytes. Could you reduce the color depth? Or decrease the resolution?
• Drawing technique
  The way a UI element is drawn by the app affects screen-loading time. For instance, is the entire background of a screen being drawn, even when a big opaque image is laid on top of it? Could a background be broken down into small tiles in order to reduce the size that needs to be uploaded?

5. Define UI Scaling Rules

Building the most appealing design is like navigating a terrain with many hurdles. It is a continual balancing act between functionality, aesthetics, usability and performance. Some platforms demand more UI compromises than others. No matter what the platform’s constraints, the brand’s key signatures should remain.

A UI scaling toolkit could help by communicating the relative importance of UI elements. Some elements are critical and contribute strongly to the brand’s identity, while removing others will have less of an impact. Our team has established the following categories:

• Essentials
  Essentials are the brand’s core UI signatures (guideline 1). For example, the application’s header.
• Alternatives
  Alternatives are less optimal, but good for high-end solutions that put a low burden on performance. An example is replacing transparent elements with opaque ones.
• Options
  These are elements that enhance the experience but could be removed to maintain performance. For example, reducing a list of search results on a page from 25 items to 10.

1. Essentials (the header).
2. Alternatives (opaque instead of transparent).
3. Options (reducing list length).

6. Use a Performance Dashboard

Clear communication among the team is critical to delivering a great product. We’ve encountered several situations where expectations of how a product should perform differed between marketers, designers and developers. Because performance is affected by the requirements and constraints of all of these disciplines, performance expectations need to be agreed on. As a solution, we introduced performance dashboards. These help to measure, monitor and set goals for the product’s current state. Dashboards effectively communicate the product’s state and the team’s expectations and areas of focus. The dashboard we’ve used accounts for the following elements:

• Core user stories
  Ensures that the dashboard communicates what the user experiences.
• Benchmark
  Compares the app to a key competitor’s.
• Current measurement
  Shows the performance of the product’s current implementation.
• Goal
  Sets the performance goal for the app.
• Status
  Indicates the current status of the app against the goal.

Example of a performance dashboard. (Numbers in seconds. For a good 3G connection.)

Several tools can help you measure performance. You can do it subjectively, by manually recording the time for certain tasks, or objectively, with tools such as TraceView for the Android SDK (if you’re developing a native app).

7. Champion Dedicated UI Engineering Skills

Design has always gone hand in hand with technology. Being able to code high-performance user experiences is a specialist’s skill. It requires strong knowledge of front-end coding and a profound understanding of the design’s purpose.

The implementation of layout, graphics, animation and so on will have performance implications. Of the many things that need to be considered, here are two:

• Smart loading
  Smart-loading mechanisms, such as lazy loading, first load visible content and then move on to content below the fold. This technique reduces the user’s waiting time and thus makes for a smoother experience.
• Background loading
  This is another well-known example. Performance depends on whether the background is one large image, an amalgamation of small tiles (say, to create a texture) or a pure algorithm. The best solution depends on the situation.

In situations where responsibilities are split between the marketing, design and development teams, we’ve noticed that UI performance tends to fall between the cracks. Each team has its own goals, and so certain shared responsibilities, such as UI performance, lose attention. We’ve addressed this by including front-end coding specialists on the design team. This encourages focus on optimal UI implementation and performance, and it achieves a more advanced user experience.

Conclusion

We’ve gone over seven guidelines that address performance relative to different aspects of mobile app design. Design choices affect performance, and so performance should be considered a key factor in the design process. Unfortunately, it tends to be looked at too late in the process, which ends up impairing the user experience significantly.

We have successfully introduced these guidelines into several product streams, which has in turn improved the performance of those products and fostered awareness of the issue among the teams. This has helped to shift the initial request from “It has to look amazing� to “It has to look, feel and work amazing!�

Credits

A big thank you goes to my colleagues Daniela Aramu, Mark Howell and Mirja Leinss, who provided invaluable feedback on this article!

(al)

© Ivo Weevers for Smashing Magazine, 2011.