1. Joomla 3.0 UX
Kyle Ledbetter
Principle Usability Engineer
eBay, Inc.

2. What’s UX?
UX is like The Force
“The force is an energy field created
by all living things, it surrounds us,
it penetrates us, it binds the galaxy
-Obi Wan Kenobi

3. Joomla User eXperience (JUX)
The overall experience you take
away from using Joomla, including:
User Interface (your heads up display)
Usability (your interactions with the UI)
Information Architecture (structure &
organization)
Accessibility (equal availability)

4. Joomla User Interface
Library (JUI)
A library of standard UI elements
that can (and should) be used in all
component views in Joomla 3.0
Based on Bootstrap from Twitter

5. Why Bootstrap?
It’s simply the best out there
period.
We get so much for free
It’s modern and minimal
Practically every UI element is already there
It’s continuously tested and improved
The barrier for entry into Joomla is lowered

11. Used Everywhere.
After all, that’s the definition of a
standard, isn’t it?
Joomla Installation Process
Joomla Administrator Interface
Joomla Admin Extension Views (Core &
Community)
Joomla Frontend Extension Views (Core &
Community)

12. Installer

15. Admin Interface

19. Frontend Template

22. Won’t everything look the same?
Yes, in a good way not a bad way
Components will finally output standard and
consistent markup & styles
Templates will handle all the theming, as they
should
All UI elements will be available everywhere,
frontend and administrator.

23. Everyone Wins!
Devs, Designers, Users
There’s no catch
Promise.

24. Component Dev Benefits
Devs don’t need a designer on the team
Devs can focus on code, not UI design
Center releases around features
Rapidly develop extensions since UI
design is immensely lowered
Develop UX FLOWS, not UI

25. Template Designer Benefits
CSS just for theming, layout and UI
is all handled by JUI
No custom CSS needed for each and
every god-forsaken component!
Style for JUI and all falls into place

26. End User Benefits
A modern, intuitive Joomla
experience
Learn Joomla once, not on a per-
component basis
Training material is more generic
and applicable to all extensions

27. Responsive Web Design
Responsive Web Design
(RWD) automatically
resizes for device
resolution.
Bootstrap is has mobile
optimization out of the
box.
Not possible from a
template, standard
responsive markup
everywhere.

29. What if Joomla devs need
more than Bootstrap?
We’ve got a plan for that. An ever
expanding & improving JUI
bootstrap-extended.css

30. bootstrap-extended.css
Additional UI elements that Bootstrap lacks
Updated up request from Joomla devs
All benefit and keep up with the latest
standards
No more “islands” created from lack of
core UI options
Core & Community, Sharing &
Collaborating

31. JUX Will Pave The Road
For Component Devs
We’ll provide examples of the many
UI variations possible with Bootstrap
There will be a Developer set of sample data.

38. Adoption is Key
(Bootstrap has already won)
Community Developers must fully
buy-in to the standard solution for
it to stay standard.
Good news: It’s already happened.

42. It’s already happening

43. jQuery in Joomla 3.0
Bootstrap is designed for
it
It’s so widely adopted
Plug’n’play (just like
compatible with:
Joomla)
Most load already
jQuery UI Compatibility
jQuery Mobile
Compatibility
Lowers even more

44. But before we start
having too much fun
We need to get our plan together

45. JUX Wishlist
JHTML for Bootstrap Markup
JToolbar (Admin) Upgrades
Admin Menu Manager
Streamlined Install Process
Admin Activity Stream
Frontend Editing
Many, many more...

46. Give ‘er a go
git clone git@github.com:Joomla3-Admin-template/
joomla-cms.git
git checkout template
Install and have fun!
@kyleledbetter