Earlier this month, I presented an updated talk on Mobile Strategy for Servoy. This one hour talk looks at the 3 options for a mobile strategy: Responsive Web, Mobile Optimized, and/or Native. I also explained why HTML5 is not a strategy; it is merely a technology you can use to implement any and all of these options. And we briefly discussed the three faces of Mobile First and how this methodology helps companies break out of old habits to create better customer experiences.
Archives For User Interface Design
It’s not every day a client entrusts us to redesign a $100 million dollar form. But the Leukemia & Lymphoma Society knew they had to do something to fix their donation forms. They were fielding phone calls from people angry because they couldn’t give LLS money.
One of the prospective donors was particularly upset, and I empathized with him. I lost my father 2 years ago this month the Leukemia. There wasn’t much I could do to help my father fight blood cancer, but one thing I can do is fix a broken user interface.
To guide this endeavor, I wrote a manifesto to address people’s frustration with the existing form:
Looking at page 3, On Your Terms, what were our options? Mobile Optimized Sites or Responsive. Learn more about these two strategies.
It was a hard decision. Ideally we should have probably created a mobile optimized form that had half as many fields, but the organization wasn’t ready to ruthlessly edit their form donation yet. And our first version was just a “fast-fix”, planned for 30 days from start to launch. No back end code changes, just UI changes. So we went with Responsive, meaning we designed the form to work well on any sized screen, from a desktop browser to a mobile phone.
The forms were developed with:
- HTML
- jQuery
- CSS3
- CSS3 media queries
- SASS
And chose these devices to test on:
- Desktops and Laptops
- Apple iPad
- Samsung Galaxy Tab
- Kindle Fire
- Apple iPhone
- Samsung Galaxy III
- Google Nexus
- HTC Window Phone
- BlackBerry Torch
(Thanks to Mudassir for pointing out that my earlier phrasing was incorrect- we didn’t target these devices, just tested on them. )
The final result is available at LLS.org, and it can also be accessed by donating to individuals participating in Team and Training and Light The Night.
We’re still working on these goals: Fast, Respectful, On Par…, and Helpful, but we’re getting there, and this is a big first step.
Here are the slides and material from the 1 day class I gave for Door64 in Austin.
Class description:
- User experience expert Theresa Neil will guide you through the latest mobile UI design strategies: Responsive web, Optimized sites, Native apps, and Hybrids.
- Study the most successful mobile implementations in the market today (and some of the worst). Learn the merits and pitfalls of each strategy.
- Get to your mobile solution faster by learning the best practices for layout and navigation.
In a nutshell, the first 45 slides look at the mobile strategy options and explains each, the next 150+ slides deep dive into the four options: responsive, mobile optimized sites, native apps and hybrids.
I pulled shamelessly from Luke W, Ethan Marcotte, and Rachel Hinman’s books and articles to create this class, and am in debt to these great designers for sharing their mobile know-how.
I will soon be presenting this class for Udemy if you missed the Austin talk!
Android users can now pay with PayPal at Starbucks.
I’m really excited to see this product come to life. We worked with PayPal on the early concepts for mobile payments at Starbucks.
Early ideas required Starbucks customers to open the PayPal application on their iPhone to pay. This Android experience is more natural, allowing customers to simply refill their Starbucks card with PayPal, within the Starbucks mobile app.
Just wrapped up a conference in Stockholm yesterday, DevSum12. Imagine my surprise to be on the front page of Sweden’s biggest Technical Magazine this morning.
Either my talk was riveting, or Computer Sweden needed more pictures of women in technology (or maybe both). Take a look at the talk and let me know your thoughts.
As soon as I have the links to the other speakers presentations, I will share those as well, including a great beginners talk on Node.js. I’m going to use Steve Sanderson’s sample files to get started with a little project of my own.
Get it for $20 on the O’Reilly site, format ePub, mobi or PDF. Please rate it and leave a review, I appreciate all feedback.
The print book should be available next week. I’ll be signing copies at SXSW @ 1:30pm March 13, at the Expo Hall.
Here are some excellent resources if you are designing an Android smartphone application for Gingerbread or Ice Cream Sandwich.
Galleries
- My Mobile Design Pattern Gallery has hundreds of screnshots from iOs, Android and other OSs. I also posted a presentation of The Best Android Apps
- After spending months compiling screenshots for the book, I just found this rockin’ Tumblr site with hundreds of screenshots specific to Android, Android Niceties
- 150 Top Andorid Apps, Editor’s Pick. Note, not all of these have a great UI, but it is definitely worth browsing
- As stated, AndroidPttrns is a shameless copy of pttrns.com, the site that catalogs iOS screenshots. Android Pttrns don’t have a lot of material yet, but I’m sure it will grow over time.
Pattern Libraries
Stencils/Templates
User Interface Design Guidelines
Blogs/ Articles
Books
- Mobile Design Pattern Gallery: UI Patterns for Mobile Applications
- Best Android Apps. Keep in mind, best refers to functionality, not best UI design. I pulled the best UI examples from here into my gallery.
- Mobile Design & Development by Brian Fling, free book. This has a really good chapter on Mobile IA.
- Mobile First by Luke W. This is more focused on mobile web, but should be read by all designers tackling mobile design challenges.
Presentations & Videos
- Must Watch, Android 4.0 Design Tips
Android 4.0 UI Design TipsView more presentations from Justin Lee
Had to whip up an OmniGraffle stencil for jQuery Mobile. I submitted it to Graffletopia, but it isn’t live yet. You can download it here in the meantime. Just put in the user name > Library > Application Support > OmniGraffle > Stencils folder and unzip.
Another great resource to help in your mobile web design projects is the Glyphish icon library- free and inexpensive icons for your mockups. 
Happy new year! I’m excited to say our group is continuing to grow, not just with more clients and projects, but in our experience as designers. In 2011 we had the good fortune to lead the design for
One thing that was common across many of these projects was the need for a comprehensive cross platform UX solution.
So we’re offering something new this year, a complete design and development solution for classic web apps + mobile web apps + installed apps for smartphones and tablets.
We’ve pulled together designers and developers from our little group to build the UXpert Team. Our team includes:
- a senior UX designer
- a creative lead
- 2-4 very experienced developers to code the user interface and provide integration support
So if you have a project that needs expert help, our first opening is mid-January. Email me for details.
Update: we are booked until fall (Aug-Sept) 2012.
I was speaking with some of our developers last night about a mobile web options like jQTouch, jQuery Mobile, Sencha Touch. And then we started talking about Backbone.js. I first heard about Backbone last week from a prospective client who mentioned they use it with PhoneGap to create their apps. I guess I’m late to the table on this one, but in case you haven’t seen Backbone.js either, check out these great examples from their site:
Jérôme Gravel-Niquet has contributed a Todo List application that is bundled in the repository as Backbone example.
DocumentCloud
The DocumentCloud workspace is built on Backbone.js, with Documents, Projects,Notes, and Accounts all as Backbone models and collections.
LinkedIn Mobile
LinkedIn used Backbone.js to create its next-generation HTML5 mobile web app.
Flow
MetaLab used Backbone.js to create Flow, a task management app for teams.
AudioVroom
AudioVroom is a free music streaming app that allows you to listen to your Facebook friends like radio stations.
Foursquare
Foursquare is a fun little startup that helps you meet up with friends, discover new places, and save money.
Do
Do is a social productivity app that makes it easy to work on tasks, track projects, and take notes with your team.
Groupon Now!
Groupon Now! helps you find local deals that you can buy and use right now.
Basecamp Mobile
37Signals used Backbone.js to create Basecamp Mobile, the mobile version of their popular project management software.
Slavery Footprint
Slavery Footprint allows consumers to visualize how their consumption habits are connected to modern-day slavery and provides them with an opportunity
to have a deeper conversation with the companies that manufacture the goods they purchased.
Trajectory
Trajectory is an agile software planning tool used to discuss wireframes, record decisions made, relate user stories and bugs to discussions, and track your progress and plan the future.
SoundCloud Mobile
SoundCloud is the leading sound sharing platform on the internet.
Pandora
When Pandora redesigned their site in HTML5, they chose Backbone.js to help manage the user interface and interactions.
CloudApp
CloudApp is simple file and link sharing for the Mac.
SeatGeek
SeatGeek‘s stadium ticket maps were originally developed with Prototype.js. Moving to Backbone.js and jQuery helped organize
a lot of the UI code, and the increased structure has made adding features a lot easier. SeatGeek is also in the process of building a mobile
interface that will be Backbone.js from top to bottom.
Talking Points Memo: Baroque
Baroque is the editor currently powering the homepage of Talking Points Memo.
Grove.io
Grove.io provides hosted IRC for teams.
Kicksend
Kicksend is a real-time file sharing platform that helps everyday people send and receive files of any size
with their friends and family.
Shortmail
410 Labs uses Backbone.js at Shortmail.com to build a fast and responsive inbox, driven by the Router.
Battlefield Play4Free
Battlefield Play4Free is the latest free-to-play first person shooter from the same team that
created Battlefield Heroes.
Salon.io
Salon.io provides a space where photographers, artists and designers freely arrange their visual art on virtual walls.
Quote Roller
Coding Staff used Backbone.js to create Quote Roller, an application that helps to create, send, organize and track business proposals with ease.
TileMill
Our fellow Knight Foundation News Challenge winners, MapBox, created an open-source map design studio with Backbone.js: TileMill.
rround.me
rround.me uses the HTML Geolocation API to discover tweets, YouTube videos, Instagram photos, Foursquare spots, and other happenings
posted by people close to you.
Blossom
Blossom is a lightweight project management tool for lean teams.
Insta-great!
Elliott Kember and Hector Simpson built Insta-great! – a fun way to explore popular photos and interact with Instagram on the web.
Decide
Decide.com helps people decide when to buy consumer electronics.
Trello
Trello is a collaboration tool that organizes your projects into boards.
BitTorrent
BitTorrent used Backbone to completely rework an existing Win32 UI.
Fluxiom
Fluxiom uses Backbone.js and HTML5 to deliver a seamless upload experience from the desktop to the cloud, including drag and drop, live previews, partial uploads, and one-click sharing.
Chop
Chop is a little app from ZURB that lets people slice up bad code and share their feedback to help put it back together.
Blackcomb
Opzi used Backbone.js to create Blackcomb, a web-based platform for collaboration applications.
QuietWrite
James Yu used Backbone.js to create QuietWrite, an app that gives writers a clean and quiet interface to concentrate on the text itself.
Tzigla
Cristi Balan and Irina Dumitrascu created Tzigla, a collaborative drawing application where artists make tiles that connect to each other to
create surreal drawings.
