Dynamic Graphics+Create Magazine
HOME   |   MAKEOVERS  |   ARCHIVE  |   EDUCATION  |   JOBS  |   ADVERTISE
Topics
Tutorials
Create a halftone border in Photoshop.
Add a halftone drop shadow using Photoshop.
Downloads
Free high-quality high resolution photos.
internet.commerce
Join Partner Program
Electronic
Designing for the Mobile User - Webcast Response
Jared Benson of Punchut responds to viewer questions about designing for mobile users ... 
March 2007
Q) What is the best application to use when designing mobile interfaces?
We use the same design tools commonly used to design other screen-based interactions. On the visual design side, we use the Adobe Creative Suite, and FireWorks. Adobe AfterEffects, Swift3D or Blender get used for rendering out icons or an animated transition. For interaction design, OmniGraffle and Visio are the tools of choice.

Q) What is the typical size that mobile design should conform to?
Actual physical screens sizes vary, but many mobile devices including higher-end phones use a QVGA (240 x 320 pixels) display. The standard, lower-end phones in the market often adhere to the QCIF+ standard, 176 x 220 pixels. Some of the newest devices promising to hit the market such as Apple’s iPhone go even higher.

Q) Are vector graphics used in design for mobile devices?
Yes. I’ve known both visual designers and interactive designers who prefer to design mobile UIs with Adobe Illustrator. For native vector support on the handset, SVG is gaining significant support as well as FlashLite. Bitmap fonts on devices are being replaced with smooth TrueTypes.

Q) What sort of best practices are there for designing for width?
Designing for variable widths should be top of mind for a designer approaching a mobile experience. Most mobile projects will need to span across multiple handsets. How will your experience scale, slide or stretch to accommodate diverse widths?

We believe in a modular, componentized design approach that allows for flexibility in designing for multiple screen dimensions and sizes. We've also found that it's important to clarify with the client which handset(s) are the key targets, and optimize the design for those devices, with guidelines given upon delivery on how the design should shift or scale for varying widths.

I'd recommend getting to understand the underlying technology as much as you can, to take advantage of efficiencies that might be made possible by the code. Scaling for variable widths is a common issue, and mobile UI languages have many capabilities you can take advantage of.

Q) With all the variations of mobile browsers, how do we test mobile interfaces effectively?
When designing for the mobile web, unfortunately, there tends to be a lot of interface design based on the common denominator. In other words, everyone's experience is "dumbed down" based on those few handsets still on the market that have limited capabilities. Depending on who the target of your interface is, and which handsets they might be using, differing levels of browser features/capabilities may be possible.

There's no substitute for viewing your interface on the target device itself. Certainly one option is to build a library of devices that you can test against. You might also look into a service that allows for testing on remote devices, viewable via the web.

Get yourself an account on DeviceAnywhere.com—they provide access to hundreds of real handsets on live worldwide networks for development and testing purposes. Their web interface allows you to see your work on the actual device, and interact with it in real-time.

Q) What are some considerations around the use of sound and sound effects in mobile design?
Audio feedback and audio cues can be helpful, especially with (non-haptic) touch screen interfaces where the user needs to get feedback that a key press has been made. An effective mobile UI should never depend on sound as a primary feedback mechanism because ambient sound may prevent such sounds from being heard, and the user may have set the device to silent or vibrate.

Q) What about voice UI to control the mobile device and services?
The common argument with voice input is that, for phones at least, the user is accustomed to speaking into the device, so there's a precedent.

Voice controls do offer excellent support for one's mobile lifestyle. Many users have grown accustomed to dialing functions by speaking to their mobile device, but one needs to proceed with caution when assuming that this precedent would lead them to speak to other aspects of the mobile interface.

Voice input has its place. It can become very compelling when designing an interface that accommodates multiple senses. The user speaks a command into the device, looks at the screen for visual feedback, touches the screen to make a selection, and hears an audio cue to confirm their choice.

And then there's always the social consideration of whether your user will truly feel comfortable speaking into the device, especially when in a crowded environment. Spoken interfaces should always have a secondary text-input option for those users who'd prefer discretion.

Q) What resources would you recommend for someone with lots of UI experience but new to mobile design, such as books or websites?
It changes every day, so my primary advice would be to stay up on the mobile industry buzz, including mainstream business press and some insider blogs. I'm a big RSS reader, with mobile feeds coming in from all over.

My daily reading list includes device-centric blogs like Engadget or Gizmodo, but also industry trend analysis and commentary coming from a variety of blogs, too many to mention. Much like the rest of the industry, many sites focus on the hardware. There is a lack of mobile user experience focused outlets, which led us to launch IdleMode (http://www.idlemode.com) to bring mobile UX designers together to talk shop. You can review a list of recommended books there as well.

Q) Any advice on how to handle checkout process with a mobile experience?
Shopping experiences in mobile are usually about immediate gratification. For example, a common scenario: Judy, our user, has some free time while waiting for an appointment and turns to her carrier's mobile storefront to find a game to pass the time. Rather then force Judy to adopt a shopping cart model for her purchase, it makes more sense to push each purchase through one at a time so she can get what she wants quickly to begin enjoying it immediately. Streamlining the checkout process is a given.

After a mobile download there are two primary recommendations. First, give Judy the option to launch/apply/activate her download immediately. Second, recognizing that shopping is a social activity, give Judy some post-purchase recommendations of other downloads that her friends (or similar users) have bought.

Q) How do you see the role of the mobile device evolving for web access?
Mobile devices outnumber personal computers by a wide margin and the mobile web continues to gain traction as a major focus of business and media companies.

We foresee that as mobile data use becomes more affordable and mobile browsing technologies improve, more and more users will turn to their phones for their internet access. Our lives are not slowing down. We're on the go, and we need that information to be accessible wherever we are. While the PC or laptop will continue to be a key access point to the web, mobile access will supplant many of the reasons we go the web on our PCs today.
Events & Courses

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs