User experience review of two sketching iPad apps--Adobe Ideas & Autodesk SketchBook Pro--that launched in April 2010. Best viewed in full screen mode.

1. Adobe Ideas vs. Autodesk SketchBook Pro:
iPad App UX Review
@suzanneginsburg
www.iphoneuxreviews.com
1

2. Thanks for your interest!
Please switch to full-screen view for optimal
viewing.
2

3. UX Review Goals
• Review design strategies & patterns
emerging among sketching iPad apps.
✔ Used to indicate best
• Suggest which of the above are practice
working well & which could use
improvement (Note color coding to
right).
✖ Used to indicate area
that can be improved
• The goal is not to suggest that one
app is better than the other.
3

4. Some Caveats...
• The two apps were designed with different goals in mind:
Adobe Ideas is for basic sketching where SketchBook Pro (as
its name implies) is much more powerful and can be used by
serious artists.
• Although the target users and goals are arguably different, I
still found the comparison useful since I was focusing primarily
on the UI and flows. The review does not compare feature sets
in great depth.
• Finally, kudos to both products for their fine work!
4

5. Brief app intros
5

6. About Adobe Ideas
• Launched when iPad came out
in April 2010.
• Allows users to sketch & save
“ideas.”
• Provides basic layering &
ability to import photos.
• Users can share sketches via
email (can later be edited in
Illustrator).
- Version 1.0 is in this review.
- #3 in Free Entertainment
category as of May 1, 2010.
6

7. About SketchBook Pro
• Also launched when iPad came
out in April 2010.
• Provides many brush options.
• Includes more advanced
layering capabilities.
• Users can export photos to a
variety of formats.
• Also available on desktop &
iPhone.
- Version 1.0.1 is in this review
- #2 in Paid Entertainment
category as of May 1, 2010.
7

8. UX Review Scope
Not all flows & screens were reviewed. The review includes:
• Toolbar organization & interaction
• Brush palette
• Layers approach
• Management UI
• Save, edit, and delete flows
• And a few other interesting areas...
8

9. Screen-by-screen UX review
9

10. New User Experience
✔
SketchBook
“how to” is
✖ Adobe
helpful but
Ideas should
should also
provide basic
provide clear
“how to” info
way to skip.
for new users.
✖ Unfortunately the
user is dumped into a
blank screen when the
tour is done. Better to
display toolbar at first.
10

11. Toolbar Organization
✖ Pencil Undo/redo Brush options Layer options
should be
closer to its
size widget
below. ✔ Groupings
work but
could use
subtle visual
cues to
reinforce
groupings &
✖ Layers should be closer to create more
drawing tools; it gets lost hierarchy,
near email. Icon also unclear. e.g., brush
could be
bigger.
11

12. Hiding the Toolbar
✖ Toolbar
✔ Toolbar doesn’t disappears
automatically go when user
away; can hide by starts
tapping “x”. drawing.
Might be
✖ Tapping this
good for
little dot brings
experienced
the toolbar back.
users but
Nice when you
hard for new
know it’s there:
users.
took me hours to
discover! Instead,
I used the
awkward 3 finger
gesture.
12

13. Brush Palette
✔ Brush size preview
nice, though subtle.
✔ Brush
preview very
powerful.
✖ Color & ✔ Brush
opacity edited properties
in separate edited in one
modes. place.
✖ Opacity % covered as user
moves their finger up and down.
13

14. Layers ✔ Familiar delete &
reorder interaction.
✖ Only two layers are
allowed, unless I’m missing
the option for more.
✖ Delete
outcome unclear
(photo is deleted).
14

15. Management Screen
✖ Neither app let’s
users reorder or
group sketches.
✖ Should group items that let
✔ Tools for users act on selected sketch (3
creating new content with red) & those for new content.
are grouped together.
15

16. Key Flows: Save, Delete, Edit
16

17. Save Flow
✖ Save only shown
when user tries to add
new item or go to gallery.
If saving required, then
the option should be
✔ Auto-saved: more evident.
appropriate for this
app though maybe
not for SketchBook.
17

18. Management: Edit Flow
Step 2. Tap edit
Step 1. Choose sketch
✖ Two
✔ One step: steps feels
tap to view/edit like a lot just
to view/edit
the sketch.
18

19. Management: Delete Flow
1. Choose delete
✔ 3 steps to
3. Choose photo
delete.
Choose photo
1. Choose photo
then action.
3. Confirm delete
✖ 4 steps to
delete. Choose
action then photo.
2. View
4. Confirm delete instructions
(# updated)
2. Choose action
19

20. A couple of neat things...
20

21. Adobe Ideas: Color Extraction
• Adobe Ideas lets you choose a
photo from your collection and
extract the colors. The colors
can then be used when
creating sketches.
• As you can see, I created a
pretty nice palette. Even better
would be the ability to move
those circles around to change
the palette.
21

22. SketchBook Pro: Brush Properties
• Once a user becomes familiar
with it, the “Brush Properties”
widget can be very powerful.
• The key is to make it easier to
learn. Personally, I found
myself gravitating to the
toolbar. Over time, I’m sure I
could get the hang of it.
• They have something like this
on their iPhone app.
22

23. Recommendations
23

24. Recommendations
1. Provide a quick “how to” to help users get started.
2. Show where controls live before hiding them, e.g., show the controls, then
slide them out of view
3. Gradually introduce novice users to shortcuts.
4. Make sure the user’s finger doesn’t cover relevant content or UI.
5. Group related tools, e.g., canvas vs. brush options.
6. Streamline task flows as much as possible; keep user in context.
7. Use familiar interactions, e.g., from iPhone, if they work well on the iPad.
24

25. Thanks for viewing!
• That’s all for now!
• There are many other notable design details but I’d like to
keep these reviews relatively short.
• Suggestions for future reviews are welcome. Please send
email to suggest@iphoneuxreviews.com
25

26. Buy my book on Amazon:
Designing the iPhone User
Experience
@suzanneginsburg
www.iphoneuxreviews.com