iNaturalist.org final presentation for Marti Hearst's UI class at UC Berkeley's School of Information Creative Commons Attribution: 1: http://flickr.com/photos/sanabria-/231490049/, http://flickr.com/photos/desertvu/451667113/, http://flickr.com/photos/jsoffer/217041291/ 2: http://www.flickr.com/photos/ambergris/27570249/, http://www.flickr.com/photos/gabu-chan/53279442/, http://www.flickr.com/photos/jimfrazier/388579803 30: http://www.flickr.com/photos/ambergris/27570249/

1. A Community for Naturalists
iNaturalist.org Final Presentation, May 3rd, 2007

2. iNaturalist.org
Evolution of an Interface
Needs Assessment and Personas

3. iNaturalist.org
Evolution of an Interface
Initial Ideas

4. iNaturalist.org
Evolution of an Interface
Paper Prototypes

5. iNaturalist.org
Evolution of an Interface
First Interactive Prototype

6. iNaturalist.org
Evolution of an Interface
Second Interactive Prototype

7. iNaturalist.org
HE Violation 1
Instructions Not Prominently Displayed

8. iNaturalist.org
HE Violation 1
Instructions Not Prominently Displayed

9. iNaturalist.org
HE Violation 2
Inconsistent Labeling

10. iNaturalist.org
HE Violation 2
Inconsistent Labeling

11. iNaturalist.org
HE Violation 3
Confusing Layout of Callout Controls

12. iNaturalist.org
HE Violation 3
Confusing Layout of Callout Controls

13. iNaturalist.org
HE Violation 4
Confusing & Unnecessary Save Button

14. iNaturalist.org
HE Violation 4
Confusing & Unnecessary Save Button

15. iNaturalist.org
Other Changes From HE
• Warning dialog when deleting an observation
• Eliminated a bug that would create an undeletable map marker
• Changed “Edit” to “Done” in the add callout
• Made map-search label more explicit
• Grey tips in form fields
• Layout/Aesthetic Changes
• shrunk header, footer, margins
• widened observation list
• changed map footer’s color
• Improved font and labeling
consistency

16. iNaturalist.org
Pilot Study
1. Discoverability of Interaction
2. Adding Observations Efficiency
3. Editing Observations Efficiency

17. iNaturalist.org
Participants
• Three participants
• All the users were familiar with computers
• Most users were familiar with Google Maps

18. iNaturalist.org
Left-click

19. iNaturalist.org
Right-click

20. iNaturalist.org
Modal Interaction

21. iNaturalist.org
Discoverability
• Is the interface obvious?
• Are the instructions in an obvious location?
Time to Complete Number of Errors
4s 6
5
3s
4
2s 3
2
1s
1
0s 0
Left Click Right Click Modal Left Click Right Click Modal

22. iNaturalist.org
Adding Efficiency
• Does the interface prevent errors?
• Can users add data quickly?
Time to Complete Number of Errors
6
6 min
5
5 min
4
4 min
3
3 min
2
2 min
1
1 min
0 min 0
Left Click Right Click Modal Left Click Right Click Modal

23. iNaturalist.org
Editing Interface

24. iNaturalist.org
Editing Efficiency
• How do users find an observation in a list?
• How do users expect to move
observations?
• How long does it take to learn?

25. iNaturalist.org
Follow-up Interview
• Simple to use, clean, clear design
• Interaction methods were understandable
• Preferred Left and Right click over Modal
• Moving observations was simple
• Instructions were not obvious at first

26. iNaturalist.org
Lessons From the Pilot Study
Move the Instructions (again)
Click to Add, Drag to Move (remove)

27. iNaturalist.org
Lessons From the Pilot Study
Give Primary Buttons Emphasis

28. iNaturalist.org
Lessons From the Pilot Study
Preset Date Should Look Set
Seriously, who
did this...

29. iNaturalist.org
Lessons From the Pilot Study
Feedback for Text Field Selection
(like Flickr...)

30. iNaturalist.org
Where We’ve Been
3rd
Prototype
and . . .

31. iNaturalist.org
Where We’re Going
• (probably) a final
project
• species identification
• tap existing data
• interact with other
people!
• observation exploration
• social incentives to
participants and get
outside