Joomla 3.0 UX JaB 2012

Joomla 3.0 UXKyle LedbetterPrinciple Usability EngineereBay, Inc.

What’s UX?UX is like The Force“The force is an energy ﬁeld createdby all living things, it surrounds us,it penetrates us, it binds the galaxy-Obi Wan Kenobi

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

Joomla User InterfaceLibrary (JUI)A library of standard UI elementsthat can (and should) be used in allcomponent views in Joomla 3.0Based on Bootstrap from Twitter

Why Bootstrap?It’s simply the best out thereperiod.We get so much for freeIt’s modern and minimalPractically every UI element is already thereIt’s continuously tested and improvedThe barrier for entry into Joomla is lowered

Used Everywhere.After all, that’s the deﬁnition of astandard, isn’t it?Joomla Installation ProcessJoomla Administrator InterfaceJoomla Admin Extension Views (Core &Community)Joomla Frontend Extension Views (Core &Community)

Installer

Admin Interface

Frontend Template

Won’t everything look the same?Yes, in a good way not a bad wayComponents will ﬁnally output standard andconsistent markup & stylesTemplates will handle all the theming, as theyshouldAll UI elements will be available everywhere,frontend and administrator.

Everyone Wins!Devs, Designers, UsersThere’s no catchPromise.

Component Dev BeneﬁtsDevs don’t need a designer on the teamDevs can focus on code, not UI designCenter releases around featuresRapidly develop extensions since UIdesign is immensely loweredDevelop UX FLOWS, not UI

Template Designer BeneﬁtsCSS just for theming, layout and UIis all handled by JUINo custom CSS needed for each andevery god-forsaken component!Style for JUI and all falls into place

End User BeneﬁtsA modern, intuitive JoomlaexperienceLearn Joomla once, not on a per-component basisTraining material is more genericand applicable to all extensions

Responsive Web DesignResponsive Web Design(RWD) automaticallyresizes for deviceresolution.Bootstrap is has mobileoptimization out of thebox.Not possible from atemplate, standardresponsive markupeverywhere.

What if Joomla devs needmore than Bootstrap?We’ve got a plan for that. An everexpanding & improving JUIbootstrap-extended.css

bootstrap-extended.cssAdditional UI elements that Bootstrap lacksUpdated up request from Joomla devsAll beneﬁt and keep up with the lateststandardsNo more “islands” created from lack ofcore UI optionsCore & Community, Sharing &Collaborating

JUX Will Pave The RoadFor Component DevsWe’ll provide examples of the manyUI variations possible with BootstrapThere will be a Developer set of sample data.

Adoption is Key(Bootstrap has already won)Community Developers must fullybuy-in to the standard solution forit to stay standard.Good news: It’s already happened.

It’s already happening

jQuery in Joomla 3.0Bootstrap is designed foritIt’s so widely adoptedPlug’n’play (just like compatible with:Joomla)Most load alreadyjQuery UI CompatibilityjQuery MobileCompatibilityLowers even more

But before we starthaving too much funWe need to get our plan together

JUX WishlistJHTML for Bootstrap MarkupJToolbar (Admin) UpgradesAdmin Menu ManagerStreamlined Install ProcessAdmin Activity StreamFrontend EditingMany, many more...

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

http://www.ostraining.com	9717
http://joomlablog.ru	8539
http://www.leomiranda.com	3736
http://www.deivison.com.br	3431
http://leomiranda.com	2511
http://www.cmswbibliotekach.umk.pl	1768
http://www.webmasters.by	1311
http://joomlabs.hu	639
http://cocoate.com	430
http://kelanasolution.com	322
http://joomlawebhosting.ca	254
http://www.sergioiglesias.net	128
http://www.estudiosite.com.br	123
http://novoportal.hu	121
http://translate.googleusercontent.com	61
http://jandbeyond.org	55
http://www.novoportal.hu	41
http://ricardavid.tumblr.com	22
http://www.kelanasolution.com	15
http://gransolin.wordpress.com	15
http://webcache.googleusercontent.com	11
http://us-w1.rockmelt.com	7
http://joomlage-cp46.webjoomla.es	4
https://si0.twimg.com	3
http://ricardavid.blogspot.be	3
http://davib.posterous.com	3
http://opensourcetalking.com	3
http://hghltd.yandex.net	2
http://blaze.apphb.com	2
https://twimg0-a.akamaihd.net	1
http://localhost	1
https://twitter.com	1
http://s7.addthis.com	1

Joomla 3.0 UX JaB 2012

by Kyle Ledbetter

Accessibility

Categories

Upload Details

Usage Rights

33 Embeds 33,282

Statistics

Joomla 3.0 UX JaB 2012 Presentation Transcript