Haptic, the App. (Website)
Update 5-31-13: The Instructor’s Response.
EF: Your presentation today was excellent. Both your spoken assessment and your visuals. You did a great job of taking complex subject matter and making it tangible.
Haptic, the App. (Website)
Update 5-31-13: The Instructor’s Response.
EF: Your presentation today was excellent. Both your spoken assessment and your visuals. You did a great job of taking complex subject matter and making it tangible.
Gesture Markup Language and Gesture Fonts | Gestureworks Core Gestures. A great place to get some free gesture icons.
Outline for Video:
1. Intro
a. Logo screen: Perceptics. The Future is designed.
2. State Problem
a. Personalizing Workspace to meet the challenge of context in the world of changing technology.
3. Related Technology
a. Leapfrog
b. Googleglass
c. Kinect
4. Required Technology
a. Introducing Perceptics Tech
b. Goggles
i. Camera
ii. Gesture detecting software
c. Bracelets
d. Envision interaction
5. Describe the downfalls of the competition
a. Limited vision and functionality with Google Glass
b. Limited portability with Kinect
6. Introduce the design of Haptic, A New Way to Draw
a. Principles behind Haptic
i. Describe ideal users
ii. accessibility
b. Features
i. Designed primarily to interface with an iPhone 4.
c. Interface
d. Versatility
7. Walkthrough
8. Business Strategy
a. Sponsorship from Art Supply Chains
b. Freemium—valuable features that are designed for power users
c. Sales in physical merchandise: different kinds of bracelets and goggles for the power users.
d. Increasing Market Place. Open Source some of the software. This will create new features and ways to engage with the product.
9. Marketing Strategy
a. Slow Launch
b. Initial Niche Market
c. Internet Video Campaign
After giving it some thought, I realized for pacing and for potential questions, the presentation should be PowerPoint and a video walkthrough.
[gigya src=”http://s.asstatic.com/player.swf” style=”position:absolute” width=”425″ height=”354″ allowFullScreen=”true” wmode=”transparent” flashvars=”file=fb=0&nb=1&ap=0&pl=as&c=#dfdfdf&p=1818886_635044207359203750″]

Today at Mobile UX Camp Seattle, Joe Welinske gave an illuminating presentation about first time UX Walkthroughs. Great ideas are worth sharing.
There is a debate about interaction design. Some say, if you need help, you already blew it. Good user experience is so well-done that it’s seamless. Apps should be limited in features anyways. If you can’t figure it out, it’s the UX designer’s fault.
Either your app is enterprise specific and it doesn’t need to act like mainstream consumer apps or it’s for the public and it uses common conventions, right? We looked at in-app tutorials, overlays vs. interactive, animation vs. live app interactions, and games vs digital journalism. The decisions made about walkthroughs depend on the 4 C’s: contextual, conforms, conditional and concise. The information should be information at the time you need it, optional, easy to click out of, efficient and consistent (looks and feels like the branding of the app).
Approach 1: This app works like all apps of its genre. It uses standard visual cues like typrographical hierarchy, colored links and partial reveal. If your users are new to computers/touchscreen gestures/apps whatever, make sure there’s a help button to enlighten them about the conventions that they are might not be aware of.
What can go wrong: It’s not obvious how to activate the help screen. When it happens, it happens when you just get the app. When the overlay takes over the screen, it’s in your face, a lot of information all at once. It’s overwhelming. Once is not enough. Retention of the information is minimal. You haven’t explored the app yet, you’re not sure you even need help navigating the app. (More on this: Jared Spool, reknown User Interface Engineer http://vimeo.com/41509755)
Approach 2: New features that you must train the user to use. Firstly, any time you’re doing upgrades, you’re screwing your existing user base. The best thing you can do is to be the least annoying as possible. Or make sure that your feature is so useful that it outweighs the annoyance of a pop-up. In the future, we’ll have apps that will be smart enough to detect when the user isn’t getting the little tricks and gestures that you’ve designed into it and it will prod the user in a helpful way to interact with the app in the way it was designed.
When to use certain app walkthrough types, it’s about the context.. Example 1, if you have a public restroom app, it’s a matter of urgency. At that point, the user is not receptive to walkthrough screens.Example 2, Google Earth has an optional walkthrough where the finger placement is indicated and you’re in the experience when you’re working with the tutorial. It’s not just an animated video. Example 3, Cut the Rope game. Each level teaches new interactions. The introductory level is simple and helps the user practice, giving a sense of achievement at the end. Good reinforcement. Example 4, Apple. Apple has traditional pdf manuals for all of their devices. It’s a cost vs benefit situation. If a certain amount of people want a pdf and it’s not too difficult, give it to them. Don’t underestimate the simplicity of a pdf. You can email it to people and it doesn’t need any navigation.
Sometimes walkthroughs will be very literal. We’ll show the hands, the gestures, directions. Things like tap and hold and multifinger interaction is still new and strange and there aren’t any conventions for that.The future: As technology becomes more ubiquitous, the walkthrough experience will be tweaked with the changing times.
Assignment: Make up an App, make 8-10 screens. Make a killer presentation and a landing page.
Phase 1 of App Design
1. structure information with user-centered considerations *Research the competitors (Links)
http://www.autismspeaks.org/autism-apps
http://www.avazapp.com/autism-app-screenshots-android/
http://lescapadou.com/LEscapadou_-_Fun_and_Educational_applications_for_iPad_and_IPhone/Draw_with_Stars_!.html
http://www.lullatone.com/games/dropophone-app/
https://itunes.apple.com/us/app/kids-writing-pad/id583914609?mt=8
http://4baam.com/applications.html
http://www.polishedplay.blogspot.com/
http://www.psoftmobile.net/en/
Related Technology
NeoLucida – A Portable Camera Lucida for the 21st Century by Pablo Garcia & Golan Levin — Kickstarte
2. communicate style and function Branding (style Tile) Version 1
Users: audience, demographic. Who is this for? How should that influence the website? Autistic children who have special needs to develop creative and communicative skills.
Wireframes and Screens to come.
Update 5-22-13: Wireframes!
Links:
Haptic, the App. (this is where my app’s landing page will live.)
Update 5-29-13– I messaged my instructor a link to this blog post and got this response on 5-24-13:
EF: So I’m impressed with your research and I can clearly see the potential for this particularly in the Autism market. In order to be successful next week you are going to need to simply your hardware/software combination and somehow demonstrate a Minimum Viable Product. SInce you cannot actually build it in our time frame, I suggest choosing between AfterEffects and Photoshop for mockups. You will need to put on your marketers hat and sell a difficult and abstract concept. Your branding feels very 90’s or retro sci fi; I would consider looking at the visual language of biotechnology for inspiration.
KC: Ok. Thanks. Lots of work to do…
EF:Do you have a way of saving work and perhaps recording the child’s progress as they use they app? Can it collect data and provide feedback?
KC: There’s a “parent” feature which records that stuff and saves it for review later… It hasn’t been expressed thoroughly in the research and execution.
EF:I think that is a good angle from both a marketing and UX perspective.
KC:I’ll consider that. Thank you.