1

Adobe Ideas vs. Autodesk SketchBook Pro:

iPad App UX Review

@suzanneginsburg www.iphoneuxreviews.com

2

Thanks for your interest!

Please switch to full-screen view for optimal viewing.

UX Review Goals

• Review design strategies & patterns emerging among sketching iPad apps.

• Suggest which of the above are working well & which could use improvement (Note color coding to right).

• The goal is not to suggest that one app is better than the other.

3

✔ Used to indicate best practice

✖ Used to indicate area that can be improved

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

Brief app intros

5

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).

6

- Version 1.0 is in this review.- #3 in Free Entertainment

category as of May 1, 2010.

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.

7

- Version 1.0.1 is in this review- #2 in Paid Entertainment

category as of May 1, 2010.

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

Screen-by-screen UX review

9

10

New User Experience

✖ Adobe Ideas should provide basic “how to” info for new users.

✔

SketchBook “how to” is helpful but should also provide clear way to skip.

✖ Unfortunately the user is dumped into a blank screen when the tour is done. Better to display toolbar at first.

11

Toolbar Organization

✖ Layers should be closer to drawing tools; it gets lost near email. Icon also unclear.

✖ Pencil should be closer to its size widget below. ✔ Groupings

work but could use subtle visual cues to reinforce groupings & create more hierarchy, e.g., brush could be bigger.

Undo/redo Brush options Layer options

12

Hiding the Toolbar

✖ Toolbar disappears when user starts drawing. Might be good for experienced users but hard for new users.

✔ Toolbar doesn’t automatically go away; can hide by tapping “x”.

✖ Tapping this little dot brings the toolbar back. Nice when you know it’s there: took me hours to discover! Instead, I used the awkward 3 finger gesture.

13

Brush Palette

✖ Color & opacity edited in separate modes.

✔ Brush properties edited in one place.

✔ Brush preview very powerful.

✖ Opacity % covered as user moves their finger up and down.

✔ Brush size preview nice, though subtle.

14

Layers✔ Familiar delete & reorder interaction.

✖ Delete outcome unclear (photo is deleted).

✖ Only two layers are allowed, unless I’m missing the option for more.

15

Management Screen

✖ Should group items that let users act on selected sketch (3 with red) & those for new content.

✔ Tools for creating new content are grouped together.

✖ Neither app let’s users reorder or group sketches.

Key Flows: Save, Delete, Edit

16

17

Save Flow

✔ Auto-saved: appropriate for this app though maybe not for SketchBook.

✖ Save only shown when user tries to add new item or go to gallery. If saving required, then the option should be more evident.

18

Management: Edit Flow

✖ Two steps feels like a lot just to view/edit the sketch.

✔ One step: tap to view/edit

Step 1. Choose sketch

Step 2. Tap edit

19

Management: Delete Flow

1. Choose delete

2. View instructions

3. Choose photo

4. Confirm delete (# updated)

1. Choose photo

2. Choose action

3. Confirm delete✖ 4 steps to delete. Choose action then photo.

✔ 3 steps to delete. Choose photo then action.

A couple of neat things...

20

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

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

Recommendations

23

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

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

Buy my book on Amazon:

Designing the iPhone User

Experience

@suzanneginsburg

www.iphoneuxreviews.com