Conquering the Empty Canvas in Appmaker

Last week in San Francisco, mozillians from around the globe gathered for the Mozilla Foundation All-hands meeting. We sat in circles, discussed, agreed, disagreed, agreed to disagree and just plain got stuff done. It was an awesome experience and I talked to a lot of great folks about how to introduce new users to Appmaker.
When building a new app, the Appmaker designer presents us with a blank app and a poorly sorted list of components. It’s like staring at an empty canvas and not even knowing how a paint brush works!
We had some great ideas, and I want to share five of them with you…

1. Remixable Starter Apps

Starting the app making process by remixing a simple starter app would immediately expose you to a set of connected components working to achieve a familiar task. Just by using the app within the designer, you would see the relationships between the different components that made up the app and learn how they communicate.
The learning process could start by changing some of those interactions, or by introducing a new component to the mix. Even with a few small changes, you could publish the app and feel like you’ve made something unique and personal to you.

2. Themed Appmaker

A related idea would be to launch Appmaker in a mode that is themed around a particular kind of app: an app for drawing, an app for doing math or a music app. This would limit the available components to a set that worked well together. This would encourage learning by making it less likely to run into scenarios where components you’re using have no useful way of working with each other.
A potential list of components in a Music theme:

  • Button
  • Drum
  • Metronome
  • Trumpet
  • Cymbal

After feeling comfortable in this limited environment you could gain access to more components and continue learning by making more complicated apps.

3. Games & Puzzles

Drawing inspiration from video games, we could introduce Appmaker concepts and components in a tutorial-like fashion. Each level in the tutorial mode could introduce a new Appmaker concept, a component and a way it can interact with another component. The tasks would get more complicated and reward you by unlocking access to new components and features.
By the time you finish the tutorial, you’ll have experience with a variety of interactions and component types and have access to an unrestricted version of the Appmaker designer.

4. Whimsy!

In our demos of Appmaker, we’ve gotten a lot of mileage out of the Fireworks component. There are good reasons for that: it’s fun, visual and satisfying to use! We need more of that.
We could introduce Appmaker through a set of fun components that work well together to create unique and unexpected visual and aural experiences. There might not be any real-world utility for what you’re building, but you’ll be rewarded for playing and experimenting with the components and Appmaker interface.

5. Offline Approaches

Using Appmaker does not have to be the first step in building an app. A lot of useful design and planning work can happen before dragging your first component onto a page. We’ve had success in the past with a workshop that helped participants think through their app in teams and create a paper prototype. Participants were encouraged to break their apps into small interconnected pieces of functionality, preparing them for engaging with the Appmaker model.

Onwards with Onboarding

Over the coming weeks we will be experimenting with approaches that fall into these categories. We’re also excited to hear your ideas and learning experiences that you’ve enjoyed with other tools…

  • Leave a comment below!
  • Say hi on Twitter.
  • Drop by on github and get involved.

1 response

  1. nike air max wrote on :

    Hi! Somеone in my Myspаce group shared this site with us sօ I came to gіve it a look.
    I’m definitely enjoyinǥ the information. I’m bookmarking and will bе tweeting thіs to my fօllowers!
    Superb blog and wоnderful stylе anɗ design.