Designing For Android: Tips And Techniques


Smashing Magazine
mobile.smashingmagazine.com

Android is an attractive platform for developers, but not all designers share our enthusiasm. Making an app look and feel great across hundreds of devices with different combinations of screen size, pixel density and aspect ratio is no mean feat. Android’s diversity provides plenty of challenges, but creating apps that run on an entire ecosystem of devices is rewarding too.

Android devices in various sizes.
There are hundreds of Android devices with different screen sizes and resolutions. (Image credit: Android Design. Used under Creative Commons license.)

At Novoda, we build Android software for brands, start-ups and device manufacturers. We often work with visual designers who are new to Android. The new Android Design site is the first resource we recommend. You should definitely check it out. However, there is plenty more to pick up! The goal is to create apps that people love to use. Thoughtful UX and aesthetically pleasing visual designs help us get there.

This article provides a set of practical tips and design considerations for creating Android apps. I’ve tried to include something useful whether you’re crafting pixel-perfect graphic assets, finding an optimal user flow or getting your hands dirty developing XML layouts.

Pixels

Visual design is hugely important in the perceived quality of an app. It might even improve usability. Most developers have some exposure to UI patterns, but developers with visual design skills are rare. They really need you. Delivering high-fidelity mock-ups, drawable resources (i.e. graphic assets) and guidance to developers is the best way to deliver an aesthetically pleasing experience to the end user.

SCALE NICELY

Android is a platform of many screen densities. There is no set of resolutions to target, rather a density independent measurement scheme for graphics, widgets and layouts. This is covered in depth in a previous Smashing article and the official documentation, so I’ll just add a mention of this neat web tool for calculating density pixels.

Screen densities.
Optimize graphics for different screen densities. (Image credit: Android Design. Used under Creative Commons license.)

It’s not always practical to hand optimize graphic assets for each density. The platform can scale resources down reasonably well. However, it’s always worth testing designs on low-end devicesand optimizing resources that scale badly.

BE STATE FRIENDLY Leer más “Designing For Android: Tips And Techniques”

Anuncios

Visual Design and Usability Yellow Brick Road

The yellow brick road is the users’ visual path. It allows them to follow a pattern to not only find their final destination, but also to always know where they are within the broader context of the site—no matter how many turns, bumps, distractions, and forks in the road they traverse along the way.

Visual paths guide users from one element to another, and allow designers to control how information is being perceived and in what order. Because readers can only absorb a certain amount of information at one time, it’s imperative to present content using a phased approach. Guide users through information-carrying areas that will help them determine which turns to take next in order to arrive at their final destination or, at a minimum, their next turn/action.


http://uxmag.com
by Tammy Guy

One of the main disadvantages of online shoppingcompared to in-store shopping is the lack of guidance.

 Walking into any retail location, customers may be greeted with a smiling face asking, “May I help you find what you’re looking for?” Online shoppers, on the other hand, are often forced to find their own way, and secretly wish for that smiling face to help them.

Visual designers have the power to change this scenario and pave the yellow brick road for users, creating a seamless and enjoyable browsing experience that can replace the smiling greeter at the door.

The yellow brick road is the users’ visual path. It allows them to follow a pattern to not only find their final destination, but also to always know where they are within the broader context of the site—no matter how many turns, bumps, distractions, and forks in the road they traverse along the way.

Visual paths guide users from one element to another, and allow designers to control how information is being perceived and in what order. Because readers can only absorb a certain amount of information at one time, it’s imperative to present content using a phased approach. Guide users through information-carrying areas that will help them determine which turns to take next in order to arrive at their final destination or, at a minimum, their next turn/action. Leer más “Visual Design and Usability Yellow Brick Road”

Designing Engaging And Enjoyable Long-Form Reading Experiences

Changing the navigation methods may be as straightforward as removing redundant menu bars or as involved as conducting user research to see which methods people use and don’t use.

Another thing to consider when looking at navigation usage patterns is that people rarely click on things that appear hard to read or cluttered. If that’s the case with your website, perhaps it’s time to look at your typography and spacing.

Experimenting With Type And Spacing

Not every typeface was designed to be read on a digital screen. Typefaces can have a huge effect on both the appeal of content and its readability. The typefaces for headlines may be beautiful and attention-grabbing, but if the ones for the copy are difficult to read, you could be turning away readers.

Not everyone will read your content exactly as it was designed. Some people set their own default font size, while others change their screen’s resolution. Still others use assistive technology, such as screen readers, to peruse content. During the course of a day, I read blogs on my iPad, pan and zoom through news on my mobile phone, edit documents on
an enormous desktop monitor and browse the Web from my television screen (at low resolution). For this same reason, tools such as Instapaper, Readability and Evernote are growing massively. The ability to control the format of what you read — and where you read it — is becoming increasingly useful.

The Boston Globe’s recent overhaul of its website received a lot of well-deserved praise, and two of the nicest things about it are the use of white space and the typography. The fonts chosen are central to the Boston Globe’s Web style, and they feel relevant to its almost 240-year-old print identity. Compare the new design to the original one, and the contrast is staggering. The Boston Globe’s new look is a great case study for news websites and readability in general. Definitely have a look if you haven’t yet.


http://uxdesign.smashingmagazine.com

Finally, some good news from the media industry: digital subscriptions are growing. We’re seeing positive reports from newspapers such as the New York Times and magazine publishers such as Conde Nast: announcements about increases in their digital content sales and paywall members.

When you have fantastic and original content, ensuring the best possible reading experience is critical to keeping and building your audience. The following practices will help you design your content in a way that improves the experience for readers.

[Note: A must-have for professional Web designers and developers: The Printed Smashing Books Bundle is full of practical insight for your daily work. Get the bundle right away!]

Navigation Methods

We often think that having many methods for finding things is easier for users. Unfortunately, the result can be mess of unhelpful and unrelated links, menus, widgets and ads. Many news websites place lists of “most-read articles” or “articles that your Facebook friends are reading” on their websites because they can. Analytics will tell you whether these methods are useful for your particular website. If no one is clicking on them, why are they taking up valuable space?

One way to quickly see the effect of slimmed-down navigation is to use Ochs, a Chrome browser extension specifically for the New York Times, written by Michael Donohoe. Open the New York Times in a different browser, then install Ochs and look at the website in Chrome. Ochs provides the massive benefit of a cleaner layout and clutter-free navigation. Things like reading tools and extra modules are removed from articles. The increased white space and removal of the New York Times’ dense navigation bars are a breath of fresh air.

New York Times with Ochs extension
The Ochs extension cleans up the UI of the New York Times. Leer más “Designing Engaging And Enjoyable Long-Form Reading Experiences”