SlideShare a Scribd company logo
1 of 30
“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
Open source software powers a lot of the web




                                               2
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
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
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
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. 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
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
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/




                                                         20
Crowd sourced user experience design

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




                                                         20
Crowd sourced user experience design

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




                                                         20
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

More Related Content

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

Designing a new user interface for open source projects
Designing a new user interface for open source projectsDesigning a new user interface for open source projects
Designing a new user interface for open source projects
Gabriel Cardoso
 
JavaFest. Антон Лемешко. Model-Driven Development in the Open Java Universe
JavaFest. Антон Лемешко. Model-Driven Development in the Open Java UniverseJavaFest. Антон Лемешко. Model-Driven Development in the Open Java Universe
JavaFest. Антон Лемешко. Model-Driven Development in the Open Java Universe
FestGroup
 
Creating Mobile Aps without Coding
Creating Mobile Aps without CodingCreating Mobile Aps without Coding
Creating Mobile Aps without Coding
Jack Molisani
 
Google Product Dev Process
Google Product Dev ProcessGoogle Product Dev Process
Google Product Dev Process
Nont Banditwong
 

Similar to Hey open source, don’t forget the user! - by Chad Kieffer (20)

Designing a new user interface for open source projects
Designing a new user interface for open source projectsDesigning a new user interface for open source projects
Designing a new user interface for open source projects
 
Design Based Dev
Design Based DevDesign Based Dev
Design Based Dev
 
Realising Dreams: Building for the Web
Realising Dreams: Building for the WebRealising Dreams: Building for the Web
Realising Dreams: Building for the Web
 
Documenting For Interactive Websites
Documenting For Interactive WebsitesDocumenting For Interactive Websites
Documenting For Interactive Websites
 
Drupal UI Tweaks PNW Drupal Summit
Drupal UI Tweaks PNW Drupal SummitDrupal UI Tweaks PNW Drupal Summit
Drupal UI Tweaks PNW Drupal Summit
 
Resilient Enterprise Design (Craig Villamor at Enterprise UX 2017)
Resilient Enterprise Design (Craig Villamor at Enterprise UX 2017)Resilient Enterprise Design (Craig Villamor at Enterprise UX 2017)
Resilient Enterprise Design (Craig Villamor at Enterprise UX 2017)
 
From Print Design to Web Design
From Print Design to Web DesignFrom Print Design to Web Design
From Print Design to Web Design
 
Drupal WebJam Utrecht
Drupal WebJam UtrechtDrupal WebJam Utrecht
Drupal WebJam Utrecht
 
Containers, Serverless, Polyglot Development World, And Others…10 trends resh...
Containers, Serverless, Polyglot Development World, And Others…10 trends resh...Containers, Serverless, Polyglot Development World, And Others…10 trends resh...
Containers, Serverless, Polyglot Development World, And Others…10 trends resh...
 
Collaborating with the Community
Collaborating with the CommunityCollaborating with the Community
Collaborating with the Community
 
JavaFest. Антон Лемешко. Model-Driven Development in the Open Java Universe
JavaFest. Антон Лемешко. Model-Driven Development in the Open Java UniverseJavaFest. Антон Лемешко. Model-Driven Development in the Open Java Universe
JavaFest. Антон Лемешко. Model-Driven Development in the Open Java Universe
 
Getting Started With Django
Getting Started With DjangoGetting Started With Django
Getting Started With Django
 
Decoupled Drupal and Gatsby in the Real World
Decoupled Drupal and Gatsby in the Real WorldDecoupled Drupal and Gatsby in the Real World
Decoupled Drupal and Gatsby in the Real World
 
Best Practices for Moving to Drupal 9
Best Practices for Moving to Drupal 9Best Practices for Moving to Drupal 9
Best Practices for Moving to Drupal 9
 
The 7 Sins of Software Engineers in HEP
The 7 Sins of Software Engineers in HEPThe 7 Sins of Software Engineers in HEP
The 7 Sins of Software Engineers in HEP
 
Creating Mobile Aps without Coding
Creating Mobile Aps without CodingCreating Mobile Aps without Coding
Creating Mobile Aps without Coding
 
Open Social Tech Talk Beijing
Open Social Tech Talk   BeijingOpen Social Tech Talk   Beijing
Open Social Tech Talk Beijing
 
Agile Ucd
Agile UcdAgile Ucd
Agile Ucd
 
Wou Intro To Usability Jandrzejewski
Wou Intro To Usability JandrzejewskiWou Intro To Usability Jandrzejewski
Wou Intro To Usability Jandrzejewski
 
Google Product Dev Process
Google Product Dev ProcessGoogle Product Dev Process
Google Product Dev Process
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 

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

  • 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. Open source software powers a lot of the web 2
  • 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. 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. 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
  • 11. But at its heart, it’s still design 10
  • 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. 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. Getting to know you—Gallery user personas 13
  • 15. Evolution of the installer 14
  • 16. Evolution of the installer 14
  • 17. Evolution of the installer 15
  • 18. Evolution of the installer 15
  • 21. Consolidation of methods and workflow 17
  • 22. Consolidation of methods and workflow 17
  • 25. Don’t you mean “organize”? 19
  • 26. Don’t you mean “organize”? 19
  • 27. Crowd sourced user experience design Drupal 7 User Experience Project: http://www.d7ux.org/ 20
  • 28. Crowd sourced user experience design Drupal 7 User Experience Project: http://www.d7ux.org/ 20
  • 29. Crowd sourced user experience design Drupal 7 User Experience Project: http://www.d7ux.org/ 20
  • 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

Editor's Notes

  1. 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.
  2. 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.
  3. Built on top of these are a growing number of open source web publishing systems. They&#x2019;re also freely available and power everything from personal blogs to NGO web sites. Maybe you've used one.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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&#x2019;ve returned to them countless times over the past six months.
  15. Prototype first, no more missing the forrest for the trees This wasn&#x2019;t a significant part of G1 or G2 releases
  16. 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&#x2019;s no need bombard the user as they&#x2019;re getting started, especially first-time users.
  17. 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&#x2019;s no need bombard the user as they&#x2019;re getting started, especially first-time users.
  18. 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&#x2019;s no need bombard the user as they&#x2019;re getting started, especially first-time users.
  19. 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&#x2019;s no need bombard the user as they&#x2019;re getting started, especially first-time users.
  20. 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&#x2019;s no need bombard the user as they&#x2019;re getting started, especially first-time users.
  21. 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&#x2019;s no need bombard the user as they&#x2019;re getting started, especially first-time users.
  22. 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&#x2019;s no need bombard the user as they&#x2019;re getting started, especially first-time users.
  23. 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&#x2019;s no need bombard the user as they&#x2019;re getting started, especially first-time users.
  24. 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&#x2019;s no need bombard the user as they&#x2019;re getting started, especially first-time users.
  25. 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&#x2019;s no need bombard the user as they&#x2019;re getting started, especially first-time users.
  26. 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&#x2019;s no need bombard the user as they&#x2019;re getting started, especially first-time users.
  27. 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&#x2019;s no need bombard the user as they&#x2019;re getting started, especially first-time users.
  28. Gallery 3&#x2019;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!
  29. Gallery 3&#x2019;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!
  30. 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.