Abstract
How do you drive up user engagement?
What game-like design patterns get your users to complete the sign-up, bring friends and come back?
This session will expose the design patterns of engagement and incentives, including relevant metrics.

You will leave with an arsenal of 16 design patterns to:

• design effective sign-up sessions and tutorials
• promote virality
• invite return visits
• apply game mechanics beyond points and bagdes

Registration and Login

• There will be registration functionality
• Design one registration flow for desktop and another one for mobile
• For mobile flow consider using the email address as the username = keeps typing to a minimum
• Think about field validation. Validate with JavaScript? Don’t forget error messages.
• What extra refinements can I make to the form for devices that support HTML5?
• Use CAPTCHA?
• SMS-based activation experience. Sweet.
• Cookies on the mobile site… yay or nay?

Presenting the Content

• Use the server to resize images or a service like TinySrc?
• Present a layout of thumbnail images?

Usability

• Optimize user tasks on the mobile version of the site (efficiency)
• Use the native app pattern of the toolbar at the bottom?

Miscellaneous

• Retina.- make assets big enough for it, then scale them down for non-retina displays. Don’t do the opposite bc I’ll mess up the graphics by scaling them up.
• How to implement user contribution mechanism?
• How will I make it social and personal (vital elements in web apps)?
• Create a separate site for mobile users? separate URL? User agent detection is unreliable.
• Design & behavior consideration: the Uncanny Valley of user interface design. Don’t try to make the mobile site look like a native app bc users will have expectations that are impossible to meet.
• How to provide the right experience… how will the server or client know whether to present the desktop or the mobile site?
• Provide link to desktop site on the mobile version. That way I don’t deprive users of any functionality. I don’t think it’s possible to upload images via a mobile site yet. A workaround: email the images to the site?
• How to create a consistent brand and user experience b/w mobile and desktop?

Speed

• Design for mobile first, i.e. responsive web design won’t cut it bc you don’t want to force users to download resources they may never even see. Go with progressive enhancement instead.

Requirements

Users must be able to (is this list for desktop, mobile or both?):

• add a new image (screenshot of an app)
• find images of a particular app
• tag images?
• build collections of images
• add images to a collection
• share an image

There are 2 or 3 sites that show a collection of app screenshots but the selection is not extensive. I wish there was a site where users could add to the site’s collection = a valuable inspiration resource. What would it take to do that?

The approach (braindump)

• I’ll take James’s advice:
  

  The two keys: (1) keep it simple, (2) make it something you’d actually use.

  Once you’ve got something working, then build a series of improved versions. Don’t create pressure by making a version suitable for public distribution, just take a long look at the existing application, and make it better.

• Ok, so should I build this with WordPress, another CMS or something like Rails?
• Should I plan to include the user submission functionality in version 1 or leave it for version 2? Why?
• Should I use Git for version control?
• Keep in mind the 10 golden principles of successful web apps

The navigation structure

Here’s what I think the navigation will look like…

early navigation structure

The 10 Golden Principles of Successful Web Apps from Carsonified on Vimeo.

I just finished watching a great video where Fred Wilson talks about 10 things he looks for in a web app prior to investing.

My notes

1. Speed.- an application must be fast. Mainstream users don’t put up with slow apps.
2. Instant utility.- the service has to be useful right out of the box. For example, Don’t make the user have to import contacts into the app before using it.
3. Voice.- “software is media today” attitude, style… your software has to have a personality e.g. the fail whale was a personality and people were walking around wearing fail whale shirts.
4. Less is more.- especially at the beginning (when you launch). Simplicity. It’ll give you the platform to grow from there.
5. Programmable.- make it possible that others can build on it, add to it, etc. i.e. APIs Let others add value to your application.
6. Personal.- make your app infused with the user’s energy. and “the more of their data and their personality that they can contribute to your application the more ownership they feel of it” and they start to care. For ex. changing their backgrounds, adding their avatars, etc.
7. RESTful.- everything in the app has a URL, a clean and comprehensible URL e.g. somebody’s list on twitter has a unique, well-understood URL. So you can share it, Google will see it = discoverability
8. Discoverable.- understand SEO, build your app from the ground up to be discovered by Google AND social media. Virality. The product itself has to push itself out to the web and to social media.
9. Clean.- the application cannot be busy on the page. Lots of white space. Big fonts. Not too much functionality presented on any one page and make it very clear what people need to do. e.g. Tumblr’s login page (nobody is not going to know what they need to do there).
10. Playful.- ability to play in an application. Using game dynamics you can incent the kind of behavior you want to create in your application.

Other important principles are: mobile, social, global, intelligent, privacy, brand (name, domain) and ease-of-use.