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.
The DocumentCloud workspace is built on Backbone.js, with Documents, Projects,Notes, and Accounts all as Backbone models and collections.
AudioVroom is a free music streaming app that allows you to listen to your Facebook friends like radio stations.
Foursquare is a fun little startup that helps you meet up with friends, discover new places, and save money.
Do is a social productivity app that makes it easy to work on tasks, track projects, and take notes with your team.
Groupon Now! helps you find local deals that you can buy and use right now.
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 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 is the leading sound sharing platform on the internet.
When Pandora redesigned their site in HTML5, they chose Backbone.js to help manage the user interface and interactions.
CloudApp is simple file and link sharing for the Mac.
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
Grove.io provides hosted IRC for teams.
Kicksend is a real-time file sharing platform that helps everyday people send and receive files of any size
with their friends and family.
Battlefield Play4Free is the latest free-to-play first person shooter from the same team that
created Battlefield Heroes.
Salon.io provides a space where photographers, artists and designers freely arrange their visual art on virtual walls.
Blossom is a lightweight project management tool for lean teams.
Decide.com helps people decide when to buy consumer electronics.
Trello is a collaboration tool that organizes your projects into boards.
BitTorrent used Backbone to completely rework an existing Win32 UI.
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.
We recently had a new mobile project starting and all of our experienced mobile designers were booked. This gave me less than a week to ramp up a new designer. So I made a quick tutorial with lots and lots of screenshots, illustrating good design and not so good design. Gradually a set of patterns for mobile application design emerged.
Even as I was cataloging these patterns, I knew that the real value wasn’t only the pattern identification, but in the hundreds of examples I’d captured. So instead of a tome of abstract patterns only an author can love, this book is a showcase, or gallery, of mobile application design. This book includes 400+ current screenshots from iOS, Android, BlackBerry, WebOS, Symbian and Windows mobile applications, organized by pattern type.
Check out the:
- New website www.mobiledesignpatterngallery.com and sign up for a free copy of the book when it is released
- New blog, and subscribe, I’ve got lots of good articles in the hopper
- Flickr photostream with over 600 screenshots organized by pattern type
- Sample Chapter UX Booth
- Preorder Mobile Design Pattern Gallery: UI Patterns for Mobile Applications on Amazon
And follow me on Twitter, @mobilepatterns, for expert mobile design tips.
eBay debuted their new payments identity technology, PayPal Access, at the X.Commerce Innovate conference this week. Take a minute to complete this survey and pick your favorite design for the PayPal Access “identity badge”: start survey . You can win an iPad 2. Survey completion and a valid email are required (we will not spam you). Winner will be announced October 17, 2011.
Read more about PayPal Access on TechCrunch.
Win a copy of my favorite new book, Simple and Usable: web mobile and interaction design, by submitting screenshots or links to the worst mobile apps you have used.
I’m on the second to last chapter of my new book, Mobile Design Pattern Gallery, and I am looking for fodder for final chapter on Anti-Patterns. Any OS is fair game: iOS, Android, Windows, BlackBerry, webOS (Palm), Symbian…
I’ll randomly choose a name from everyone who submits a sample to theresaneil at gmail dot com and/or comments with the app name and link.
I need at least 100 submissions, so share this on Twitter.
Deadline: August 5, 2011
I noticed an article on bokardo, Joshua Porter’s blog, about Functionality, Gamification, and Feedback Loops. He has some insightful comments on the Wired magazine article Harnessing the Power of Feedback Loops.
I saw a great example of gamification and feedback loops in the iPad app Kobo. Kobo is an alternative to iBook. Unlike iBook, Kobo has integrated a concept called “Reading Life” that offers awards, statistics, and images to share in my social networks
Kobo tablet screenshots- from OhGizmo
I immediately called my friend and asked her to get Kobo on her iPad so we could both use it and see who reads the fastest (a little competitive spirit going on). Then I sent a link to another friend- encouraging her to use it too. Then I bought some books and will shortly post my Bookcover on Facebook.
Compare this to Audible’s Stats (timer, achievement awards and badges), which leave me feeling under-motivated. I mean, I’ll use the app and all, but I’ll never intentionally open the Stats screens again.
Kobo and Audible are both using gamification techniques to encourage specific behaviors (buy more books). So why is Kobo getting me to change my behavior and Audible isn’t?
- Audible has a bug and isn’t pulling in any of my hundred of stories I’ve bought over the past few years. So the feedback loop that might encourage me to “level up” isn’t working because the data is bad (I’m not an AppNewbie).
- Kobo started me off with some badges already earned (good for me!), Audible has me at 0 out of 15 (lame-o).
- The stats in both apps stay up to date to reflect my reading/listening patterns. Audbile only has one stat, listening time, whereas Kobo offers lots of interesting information.
- Most importantly: Kobo tapped into not only how I read (pages per hour), but how reading is a part of my life. I’m in a book club, I share my favorite titles and authors with friends, I read out loud to my kids, my mom and I bond over books. With Kobo’s “Reading Life” I can now easily share what I’m reading with my circle of friends and family.
Please share other example of apps using gamification and feedback loops effectively, or examples of ones that failed.
UX Magazine published my most recent article, End to End Experience Design today. Take a look, it has lots of pictures and even comes with a helpful checklist:
Thank you to Pascal Raabe for the great design.
Harvest, the time tracking and invoicing tool we use, just added a new filter mechanism to their report generator. While I appreciate the additional functionality, I was most impressed with their multi-select combobox. It looks like a normal text field, but once the field has focus you can select any option and it will be added into the field, click again and you can select another option, building up any number of options. The field just gets larger (more rows are added) when you add more options than can be displayed in a single row.
It is equally easy to remove items from the field by clicking the little ‘x’ next to each option.
Does anyone know if there is a JQuery control for this? That would be awesome. A Flex control like this would be nice too, just in case there are any motivated developers reading this (wink, wink)…
We’ve been working with Adobe since last year to design and develop a showcase of reference applications for Flex 4.5 and Flash Builder 4.5. This has been an amazing project from a design and development perspective, designing for multiple form factors, and coding with the new SDK.
Read more here:
Just a year after Flash Builder 4 and Flex 4 SDK were released, new versions are available with Flash Builder 4.5 and Flex 4.5 SDK! The main focus for Flex 4.5 SDK and Flash Builder 4.5 is the ability to build mobile applications that target the Google Android, Blackberry Tablet OS, and Apple iOS operating systems. Additionally, Flex 4.5 SDK introduces new Spark components and improvements for large application development while Flash Builder 4.5 introduces dozens of new coding productivity features for faster ActionScript and MXML development.
After our book release in January 2009, we posted an article on 12 Standard Screen Patterns. It went viral with hundreds of thousands of readers. Two years later, it still gets 1,000+ readers each week.
In 2010 we updated the screen patterns, including a few more and all new examples: RIA Screen Layouts. With more than 40k views on Slideshare, it seems to be pretty popular.
And now they are in print too! Three books this year included our screen patterns as the way to solve common UI problems:
- Designing Interfaces: Patterns for Effective Interaction Design- Second Edition by Jenifer Tidwell, O’Reilly Media 2011
- Smashing Book #2, Smashing Media GmbH 2011
- Professional Web Design: The Best of Smashing Magazine, Smashing Media GmbH 2011