Follow Along Tutorials

Adobe is experimenting with follow along tutorials making them integral part of the interface both on desktop and table applications. In Photoshop for iPad the landing page features a set of tutorials introducing to the main features of the application.



I don't like reading help or documentation, and my style of learning, as the large majority of people, is more example based. Follow along tutorials are a very effective way to learn even the most complex tools.
When a tutorial first introduces a feature it often point to its location in the interface.



On the iPad the screen is pretty limited, and Adobe was able to fit the entire UI required for the follow along tutorial in one narrow bar on the bottom. Relevant, but not essential information is displaying it in form or tips in the context of the specific step.



The bar on the bottom displays the current step, enable to jump to adjacent steps and provides the access to related tips.



Adobe adopts a similar strategy in one of its newest product: Edge. Edge is a tool for creating interactive motion content for the web using HTML5, CSS3, and JavaScript. The start-up page features the main tutorials.



After selecting  a tutorial a Lessons panels appears on the right and it displays the follow along steps.



After completing a tutorial the panel displays the list of all tutorial, enabling the user to select the next one.



Follow along tutorial is a very powerful and effective tool for many different types of applications.
This approach can be applied to the more diverse problems. Below and example of this strategy applied to teaching a coding language.

Read more »

Dealing with Hidden Gestures

Our beloved mobile devices rely on a new type of input: multi-touch gesture. This is a relatively new domain, and while some gestures, as pinch to zoom, are becoming a standard interaction, there are many others used sporadically and inconsistently among apps.
Multi-touch gesture is a powerful new way to express input, but how can an app overcome the discoverability challenges?
In this article I am listing few solutions I have run into and few thoughts about their pro and cons.
Help window.
Some app, as ArtRage, display all available gestures in a separate window or pop-up invoked from a traditional help button.
The advantage is that I can get help when I need it.
The disadvantage is that I may never open the help to discover that multiple gestures are available.


Overview during startup
Some apps, as RDP or Spashtop Remote, display a help screen at the startup which illustrates all main gestures used in the app.
The advantage is that I have to view this information at least once.
The disadvantage is that this information shows when I less need it. The pop-up is kind of annoying, but I am afraid to permanently closing it, for when I need it in the future. I keep dealing with it, yet being mildly annoyed. More important, I am not sure how to get this information while using the app, which is when I actually need it.


Help when you need it
Another strategy, used by Google app, is to display a help tip the first time I am in a context where the tip applies.
The advantage is that this information shows when I most likely need it.
The disadvantage is that I may forget the gesture in the future, and have no way to bring back these instructions.


Overlay at startup and on demand
Finally some app, as Sanpseed, display help information both at the first launch of the app and on demand.
The advantage is that the information is both discoverable for the first time user and easy to retrieve when you need it. This solution provides a place to display both help on the gestures and on other areas of the user interface.
I can't see any obvious disadvantage, except that you may need to remember to get help.


- Posted using BlogPress from my iPad

Read more »

Contextual help without the usual drawbacks

Mobile apps are required to use the screen very wisely, and often there is not enough space to display both icons and labels for commands. This often calls for mechanism of help on demand. Unfortunately hover is not an interaction available on touch devices, which makes difficult to display standard tooltips.
Contextual help may be very powerful if it is well executed. It is much preferable to view help information clearly associated to what they describe, than a global description out of their context. Help should be easy to discover, readily available, yet it should take minimal space, since it becomes irrelevant once user reads it.
Unfortunately most of the applications which implement contextual help, either are difficult to discover, lack of a global view, clutter the UI or use too much real estate.
Only recently I ran into few examples of iPad apps which seems to overcome most of these limitations.
The most recent example of well executed contextual help is implemented in iPhotos.
Help is easy to discover from the icon consistently present on the screen.
When help is invoked it displays a set of callouts which describes the different interface elements in the current screen.




Tapping on the help icon again will hide all callouts.




What I like of this solution is that it provides a complete, yet contextual description of what I see on the screen.
Other apps use a glass pain over the interface, to overlay help information in relation of their context. While glass pain solutions are more visually pleasing, they make harder to view the context they are associated to, and they don't work well when the UI elements to describe are as dense as in the case of iPhotos.




Other apps try to compensate for this information density by showing one help clue at the time.




This solutions has the drawback of tooltip based help, where user can't get a global view of all clues. He/she is forced in a tunnel view, where only one clue at the time can be uncovered.
It is interesting as the lack of hover on touch devices has forces designer to come up with new, and in this case, better ideas. This is once again the proof that adding constraints may sparks innovation in the design process.
- Posted using BlogPress from my iPad

Read more »

Guiding Users in Welcome Screen

I like the "wizard" like appearance of these welcome/getting started screen. It guides the user to watch the tutorial videos is a specific order. I am wondering if they somehow indicate which tutorial the user has watched already. It would be a useful way to represent the progress.

Read more »