“Hey open source,
 don’t forget the user!”
User-centered design takes hold in open source web applications

Chad Kieffer, ...
Open source software powers a lot of the web




                                               2
Open source web publishing systems

• Powers blogs, social networks,
  online communities, wikis


• Primarily by individu...
What is Gallery?

• Open source PHP-based web application started
  by Bharat Mediratta in 2000 


• You manage your photo...
Open source from the developer’s perspective
public function thumb_tag($extra_attrs=array(), $max=null, $micro_thumb=false...
Different perspectives




                         6
Different perspectives




                         6
What is
user-centered
design?




                7
User-centered
design
processes
and
disciplines




                8
Increasingly sophisticated tools and techniques




                                                  9
But at its heart, it’s still design




                                      10
Yeah, so why should I care?

Seeing users consistently fail at what we
consider to be basic tasks is a true eye
opener. Le...
Gallery’s evolution




• 2000-2004
  Gallery 1 - Developers learn their tools and basic engineering requirements


• 2005...
Getting to know you—Gallery user personas




                                            13
Evolution of the installer




                             14
Evolution of the installer




                             14
Evolution of the installer




                             15
Evolution of the installer




                             15
Simplification and context are key




                                    16
Simplification and context are key




                                    16
Consolidation of methods and workflow




                                       17
Consolidation of methods and workflow




                                       17
Consolidation of similar features




                                    18
Consolidation of similar features




                                    18
Don’t you mean “organize”?




                             19
Don’t you mean “organize”?




                             19
Crowd sourced user experience design

Drupal 7 User Experience Project: http://www.d7ux.org/




                         ...
Crowd sourced user experience design

Drupal 7 User Experience Project: http://www.d7ux.org/




                         ...
Crowd sourced user experience design

Drupal 7 User Experience Project: http://www.d7ux.org/




                         ...
Parting thoughts

• Open Source Software Contributors
  Do what you have to meet the technical challenges, but not at the ...
Upcoming SlideShare
Loading in …5
×

Hey open source, don’t forget the user! - by Chad Kieffer

947
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
947
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Hi! I'm Chad Kieffer and I make web sites powered by open source software.
    I also contribute to an open source web project.
    I'd like to see these applications more widely used but there's a problem.
  • Open source operating systems, web servers, programming languages, and databases power a big part of the web.
    They're written by volunteer and paid programmers for technical users.
    They do their job well and their free.
  • Built on top of these are a growing number of open source web publishing systems.
    They’re also freely available and power everything from personal blogs to NGO web sites.
    Maybe you've used one.
  • Another example, Gallery, allows you to share your photos on your web site.
    Initially, it was just a few scripts written by an individual to share photos with his family.
    It quickly grew and attracted other contributing developers.
  • I'm often asked why build something and give it away?
    There are practical reasons programmers contribute,
    but in most cases they do it for the love of writing code and building cool things.
    Problem is, the user interface is often an after thought.
    Early adopters are almost always technically savy.
  • So the application is installed, \"It does just what we need and it was free!\"
    Then the rest of the users login and see something resembling this.
    But don't worry, everything is documented on the project's wiki.
  • So the application is installed, \"It does just what we need and it was free!\"
    Then the rest of the users login and see something resembling this.
    But don't worry, everything is documented on the project's wiki.
  • Enter user-centered design. Interview, survey, test, and respond to actual user's needs before, during and after building.
    Doing so provides focus during development and requires less documentation and support resources.
  • When I started making web sites, you talked to the customer, you designed, you built, and the only test you did was to make sure the links worked.
    Since then, things have really changed.
    It's not just graphic design or writing HTML, it's user experience design.
  • These are user heat maps and user eye tracking maps generated at the University of Minnesota showing where users looked and clicked this sample Drupal page.
    More and more design decisions are based on test results and collected data.
    Analytics and user testing techniques are blurring the lines between software engineering and interface design.


  • But don't worry, design is still at the core of the process.
    Analog has survived and is thriving in user-centered web design.
    Hand drawn wireframe sketches are widely used.
  • So you may be asking why should I care.
    What you need to know is that open source developers attitudes are changing.
    Several projects have made significant progress instituting user-centered design practices.
  • Gallery 1 was about learning languages and solving engineering problems.
    Gallery 2 was about refining engineering practices and adding every feature along with the kitchen sink.
    User-centered design was an after thought until work began on Gallery 3.
  • Students at the University of Michigan's School of Information chose Gallery for a class project.
    One team interviewed actual Gallery users and wrote up these user personas.
    These were eye openers for the team and we’ve returned to them countless times over the past six months.
  • Prototype first, no more missing the forrest for the trees
    This wasn’t a significant part of G1 or G2 releases

  • Show and tell time.
    Here's Gallery 1's install \"wizard\", which is daunting, even for seasoned UNIX system administrators.
    Gallery 2's install wizard, while looking a little nicer, throws too much at the user and is really overwhelming.
    There’s no need bombard the user as they’re getting started, especially first-time users.
  • Show and tell time.
    Here's Gallery 1's install \"wizard\", which is daunting, even for seasoned UNIX system administrators.
    Gallery 2's install wizard, while looking a little nicer, throws too much at the user and is really overwhelming.
    There’s no need bombard the user as they’re getting started, especially first-time users.
  • Show and tell time.
    Here's Gallery 1's install \"wizard\", which is daunting, even for seasoned UNIX system administrators.
    Gallery 2's install wizard, while looking a little nicer, throws too much at the user and is really overwhelming.
    There’s no need bombard the user as they’re getting started, especially first-time users.
  • Show and tell time.
    Here's Gallery 1's install \"wizard\", which is daunting, even for seasoned UNIX system administrators.
    Gallery 2's install wizard, while looking a little nicer, throws too much at the user and is really overwhelming.
    There’s no need bombard the user as they’re getting started, especially first-time users.
  • Show and tell time.
    Here's Gallery 1's install \"wizard\", which is daunting, even for seasoned UNIX system administrators.
    Gallery 2's install wizard, while looking a little nicer, throws too much at the user and is really overwhelming.
    There’s no need bombard the user as they’re getting started, especially first-time users.
  • Show and tell time.
    Here's Gallery 1's install \"wizard\", which is daunting, even for seasoned UNIX system administrators.
    Gallery 2's install wizard, while looking a little nicer, throws too much at the user and is really overwhelming.
    There’s no need bombard the user as they’re getting started, especially first-time users.
  • Show and tell time.
    Here's Gallery 1's install \"wizard\", which is daunting, even for seasoned UNIX system administrators.
    Gallery 2's install wizard, while looking a little nicer, throws too much at the user and is really overwhelming.
    There’s no need bombard the user as they’re getting started, especially first-time users.
  • Show and tell time.
    Here's Gallery 1's install \"wizard\", which is daunting, even for seasoned UNIX system administrators.
    Gallery 2's install wizard, while looking a little nicer, throws too much at the user and is really overwhelming.
    There’s no need bombard the user as they’re getting started, especially first-time users.
  • Show and tell time.
    Here's Gallery 1's install \"wizard\", which is daunting, even for seasoned UNIX system administrators.
    Gallery 2's install wizard, while looking a little nicer, throws too much at the user and is really overwhelming.
    There’s no need bombard the user as they’re getting started, especially first-time users.
  • Show and tell time.
    Here's Gallery 1's install \"wizard\", which is daunting, even for seasoned UNIX system administrators.
    Gallery 2's install wizard, while looking a little nicer, throws too much at the user and is really overwhelming.
    There’s no need bombard the user as they’re getting started, especially first-time users.
  • Show and tell time.
    Here's Gallery 1's install \"wizard\", which is daunting, even for seasoned UNIX system administrators.
    Gallery 2's install wizard, while looking a little nicer, throws too much at the user and is really overwhelming.
    There’s no need bombard the user as they’re getting started, especially first-time users.
  • Show and tell time.
    Here's Gallery 1's install \"wizard\", which is daunting, even for seasoned UNIX system administrators.
    Gallery 2's install wizard, while looking a little nicer, throws too much at the user and is really overwhelming.
    There’s no need bombard the user as they’re getting started, especially first-time users.
  • Gallery 3’s installer cuts barrier to entry level down dramatically.
    All the user needs to provide is a user name and password for the database and to allow Gallery to save photos on the disk.
    One input screen, a confirmation, and a welcome!
  • Gallery 3’s installer cuts barrier to entry level down dramatically.
    All the user needs to provide is a user name and password for the database and to allow Gallery to save photos on the disk.
    One input screen, a confirmation, and a welcome!
  • Another instance of Gallery 2 presenting users with far too many options.
    I get overwhelmed just looking at this.
    Gallery 3 gives focus to the most frequently used options.
    Other options are revealed in context.
  • Hey open source, don’t forget the user! - by Chad Kieffer

    1. 1. “Hey open source, don’t forget the user!” User-centered design takes hold in open source web applications Chad Kieffer, Gallery Project ckieffer@gmail.com www.2tbsp.com @ckieffer 1
    2. 2. Open source software powers a lot of the web 2
    3. 3. Open source web publishing systems • Powers blogs, social networks, online communities, wikis • Primarily by individuals, universities, gov’t agencies, and NGOs • Attempting to make web publishing as easy as traditional word processing or desktop publishing 3
    4. 4. What is Gallery? • Open source PHP-based web application started by Bharat Mediratta in 2000  • You manage your photos and your site’s look and feel instead of Flickr, Photobucket, Kodak, etc. • Installed on hundreds of thousands web sites to date • Project site: http://gallery.menalto.com • More on Gallery in about 1 minute and 45 seconds 4
    5. 5. Open source from the developer’s perspective public function thumb_tag($extra_attrs=array(), $max=null, $micro_thumb=false) { list ($height, $width) = $this->_adjust_thumb_size($max); if ($micro_thumb && $max) { // I’ve always wanted to build something like this // The constant is divide by 2 to calculate the file and 10 to convert to em $margin_top = ($max - $height) / 20; // This will look great on my resumé $extra_attrs[quot;stylequot;] = quot;margin-top: {$margin_top}emquot;; $extra_attrs[quot;titlequot;] = $this->title; } // This is so much more fun than my day job $attrs = array_merge($extra_attrs, array( quot;srcquot; => $this->thumb_url(), quot;altquot; => $this->title, quot;widthquot; => $width, quot;heightquot; => $height) ); // <geekcred> I love to write code and make cool stuff! </geekcred> // html::image forces an absolute url which we don't want return quot;<imgquot; . html::attributes($attrs) . quot;/>quot;; } 5
    6. 6. Different perspectives 6
    7. 7. Different perspectives 6
    8. 8. What is user-centered design? 7
    9. 9. User-centered design processes and disciplines 8
    10. 10. Increasingly sophisticated tools and techniques 9
    11. 11. But at its heart, it’s still design 10
    12. 12. Yeah, so why should I care? Seeing users consistently fail at what we consider to be basic tasks is a true eye opener. Let's be clear about this: this is Drupal's fault, not the users' fault. The good news is that we came out of this with a long list of usability problems that we can fix. —Dries Buytaert on Drupal usability test results conducted by the University of Minnesota 11
    13. 13. Gallery’s evolution • 2000-2004 Gallery 1 - Developers learn their tools and basic engineering requirements • 2005-2008 Gallery 2 - Engineering refined, some UI improvements, lots of new features • October 2008 Gallery 3 - Return focus to core features, institute user-centered design 12
    14. 14. Getting to know you—Gallery user personas 13
    15. 15. Evolution of the installer 14
    16. 16. Evolution of the installer 14
    17. 17. Evolution of the installer 15
    18. 18. Evolution of the installer 15
    19. 19. Simplification and context are key 16
    20. 20. Simplification and context are key 16
    21. 21. Consolidation of methods and workflow 17
    22. 22. Consolidation of methods and workflow 17
    23. 23. Consolidation of similar features 18
    24. 24. Consolidation of similar features 18
    25. 25. Don’t you mean “organize”? 19
    26. 26. Don’t you mean “organize”? 19
    27. 27. Crowd sourced user experience design Drupal 7 User Experience Project: http://www.d7ux.org/ 20
    28. 28. Crowd sourced user experience design Drupal 7 User Experience Project: http://www.d7ux.org/ 20
    29. 29. Crowd sourced user experience design Drupal 7 User Experience Project: http://www.d7ux.org/ 20
    30. 30. Parting thoughts • Open Source Software Contributors Do what you have to meet the technical challenges, but not at the expense of the user. Look to incorporate or improve user-centered design techniques and processes in your project. • User Experience Designers Consider contributing your expertise to an open source project. Developer attitudes towards designers have changed significantly in recent years. • Everyone Next time you’re looking for software, do a Google search for open source alternatives before purchasing commercial software. You may be pleasantly surprised. 21
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×