Embed Size (px)
DESCRIPTION
As website developers working in a Content Management System like Drupal, WordPress or Magento we are poised with 2 main challenges. 1.) How can we get the project to work well on the front-end 2.) How can we get the project to work well on the back-end As front end designers, we are excited at the opportunity sharpen our Photoshop and Illustrator skills. We map out wireframes with those silly annotations, create frivolous color pallet options, fine tune our SVG graphics and geek out on the subtle bits of over the top creativity. As back end developers, we make sure we pre-process our fields data just before theme rendering, we hook into every possible core function, we provide variables only front end nerds are going to need. But what about the person we actually built the website for? Was this for the end-user? - your average web browsing hipster with Stumptown Coffee stains on his laptop? Maybe. But aren't we forgetting the most important person here in the project? It's not you. It's the client. You know... the one who actually has to use this beautifully crafted website after you are done fiddling with it. Yeah that guy. What about the client experience? So he just paid a grip of cash for this bad ass website and you are ready to hand over the keys only to tell him, "oh by the way, here is the bible I created for you to understand how this damn thing actually works. Please give this manual to your IT staff so they can decipher it and hopefully not screw it up." Okay - okay - so that was a bit overboard, but let's take a look at how we can create an awesome admin experience for the client and really WOW your them on your next Drupal project.
Citation preview
QUICK INTRODUCTION
People call me “GONZ”
QUICK INTRODUCTION
1. Never went to Art School
QUICK INTRODUCTION
1. Never went to Art School2. Never took Computer Science class
QUICK INTRODUCTION
1. Never went to Art School2. Never took Computer Science class3. Never won an Award
QUICK INTRODUCTION
SOME CLIENTS
SOME CLIENTS
SOME CLIENTS
SOME CLIENTS
SOME CLIENTS
SOME CLIENTS
SOME CLIENTS
QUICK INTRODUCTION
We’re Hiring(shameless plug)
WARNING:
WARNING:
So why this session?
As website developers working in a Content Management System like Drupal, WordPress or Magento we are poised with 2 main challenges.
As website developers working in a Content Management System like Drupal, WordPress or Magento we are poised with 2 main challenges.
1. How can we get the project to work well on the front-end
As website developers working in a Content Management System like Drupal, WordPress or Magento we are poised with 2 main challenges.
1. How can we get the project to work well on the front-end
2. How can we get the project to work well on the back-end
What we will cover: Think Like an Admin
What we will cover: Think Like an Admin Building Admin UX
What we will cover: Think Like an Admin Building Admin UX Common Mistakes
What we will cover: Think Like an Admin Building Admin UX Common Mistakes Personal Mission
As DevSigners – It is our responsibility to create the total web experience.
THINK LIKE AN ADMIN
THINK LIKE AN ADMIN
THINK LIKE AN ADMIN
1. Admin’s 1st Impression
THINK LIKE AN ADMIN
VS.
THINK LIKE AN ADMIN
1. Admin’s 1st Impression– Branded vs Blah UI
THINK LIKE AN ADMIN
1. Admin’s 1st Impression– Branded vs Blah UI– Keep it Simple (KISS)
THINK LIKE AN ADMIN
1. Admin’s 1st Impression– Branded vs Blah UI– Keep it Simple (KISS)– Customer Login vs Admin Login
THINK LIKE AN ADMIN
2. Admin’s Key Objectives
THINK LIKE AN ADMIN
2. Admin’s Key Objectives
THINK LIKE AN ADMIN
2. Admin’s Key Objectives
THINK LIKE AN ADMIN
2. Admin’s Key Objectives
THINK LIKE AN ADMIN
2. Admin’s Key Objectives
THINK LIKE AN ADMIN
2. Admin’s Key Objectives
THINK LIKE AN ADMIN
2. Admin’s Key Objectives
THINK LIKE AN ADMIN
3. Provide Training
THINK LIKE AN ADMIN
3. Provide Training
– Video Tutorials
THINK LIKE AN ADMIN
THINK LIKE AN ADMIN
3. Provide Training
– Video Tutorials– Blog Posts (restricted access)
THINK LIKE AN ADMIN
3. Provide Training
– Video Tutorials– Blog Posts (restricted access) – Book Module (old school)
THINK LIKE AN ADMIN
3. Provide Training
– Video Tutorials– Blog Posts (restricted access) – Book Module (old school)– Keep Front & Center
THINK LIKE AN ADMIN
AWESOME CUSTOM ADMIN MENU
SUPER HELPFUL HINTS
BUILDING ADMIN UX
BUILDING ADMIN UX
BUILDING ADMIN UX
BUILDING ADMIN UX( Using Drupal Core )
Drupal Dashboard Module
Drupal Dashboard Module
Drupal Dashboard Module
Drupal Dashboard Module
Get Creative Here
Drupal Shortcuts Module
Drupal Menu
BUILDING ADMIN UX
Drupal Menu Block
BUILDING ADMIN UX
BUILDING ADMIN UX
Some Helpful Tips:
BUILDING ADMIN UX
Some Helpful Tips:– Keep Content Types Easy to Populate
BUILDING ADMIN UX
Some Helpful Tips:– Keep Content Types Easy to Pupulate
BUILDING ADMIN UX
Some Helpful Tips:– Keep Content Types Easy to Populate– Keep Logic on the Backend
BUILDING ADMIN UX
BUILDING ADMIN UX
Some Helpful Tips:– Keep Content Types Easy to Populate– Keep Logic on the Backend
Favorite Modules:
BUILDING ADMIN UX
Some Helpful Tips:– Keep Content Types Easy to Populate– Keep Logic on the Backend
Favorite Modules:– Good ol’ Taxonomy
BUILDING ADMIN UX
Some Helpful Tips:– Keep Content Types Easy to Populate– Keep Logic on the Backend
Favorite Modules:– Good ol’ Taxonomy– Field Collection Module
BUILDING ADMIN UX
Some Helpful Tips:– Keep Content Types Easy to Populate– Keep Logic on the Backend
Favorite Modules:– Good ol’ Taxonomy– Field Collection Module #thankyou
BUILDING ADMIN UX
Some Helpful Tips:– Keep Content Types Easy to Populate– Keep Logic on the Backend
Favorite Modules:– Good ol’ Taxonomy– Field Collection Module #thankyou– Entity Reference
BUILDING ADMIN UX
Huge Fan ofLanding Page Editors
BUILDING ADMIN UX
BUILDING ADMIN UX
Keep the Adminin one place &
make it easy as possible
BUILDING ADMIN UX
Admin input fieldsshould have meaningful
instructions.
BUILDING ADMIN UX
BUILDING ADMIN UX
<?php global $user;if (is_array($user->roles) && in_array('administrator',
$user->roles)) {print '<a href="/node/' . $node->nid . '/edit"
class="blogEdit">Edit</a>';}
?>
Quick Edit Links for AdminEdit Link
BUILDING ADMIN UX
<?php global $user;if (is_array($user->roles) && in_array('administrator',
$user->roles)) {print '<a href="/node/' . $node->nid . '/edit"
class="blogEdit">Edit</a>';}
?>
Quick Edit Links for Admin
BUILDING ADMIN UX
Take it a Step Further
BUILDING ADMIN UX
Take it a Step Further– Design Your Own Admin Dashboard
BUILDING ADMIN UX
Take it a Step Further– Design Your Own Admin Dashboard– Wireframe it Out
BUILDING ADMIN UX
Take it a Step Further– Design Your Own Admin Dashboard– Wireframe it Out
BUILDING ADMIN UX
BUILDING ADMIN UX
Take it a Step Further– Design Your Own Admin Dashboard– Wireframe it Out– /user-template.tpl.php
BUILDING ADMIN UX
Take it a Step Further– Design Your Own Admin Dashboard– Wireframe it Out– /user-template.tpl.php
<?php global $user;if (is_array($user->roles) && in_array('administrator',
$user->roles)) {print ’YOUR ADMIN HTML HERE';
}?>
BUILDING ADMIN UX
Custom Admin Dashboard
BUILDING ADMIN UX
Custom Admin Dashboard– Create a Custom Module
BUILDING ADMIN UX
Custom Admin Dashboard– Create a Custom Module
BUILDING ADMIN UX
Custom Admin Dashboard– Create a Custom Module
BUILDING ADMIN UX
Custom Admin Dashboard– Create a Custom Module
BUILDING ADMIN UX
Custom Admin Dashboard– Create a Custom Module
BUILDING ADMIN UX
Custom Admin Dashboard– Create a Custom Module
BUILDING ADMIN UX
Custom Admin Dashboard– Create a Custom Module
BUILDING ADMIN UX
Custom Admin Dashboard– Create a Custom Module
BUILDING ADMIN UX
Custom Admin Dashboard– Render a User Login Form
BUILDING ADMIN UX
Custom Admin Dashboard– Render a User Login Form
BUILDING ADMIN UX
Redirect Admin to Dashboard
BUILDING ADMIN UX
Redirect Admin to Dashboard– Login Destination URL
BUILDING ADMIN UX
Redirect Admin to Dashboard– Login Destination URL
• If User Role = Admin
BUILDING ADMIN UX
Redirect Admin to Dashboard– Login Destination URL
• If User Role = Admin– Rules
BUILDING ADMIN UX
Redirect Admin to Dashboard– Login Destination URL
• If User Role = Admin– Rules
• After Login -> If User Has Role = Admin => URL
BUILDING ADMIN UX
Restricted Access
BUILDING ADMIN UX
Restricted Access– Drupal ACL + Content Access Modules
BUILDING ADMIN UX
Restricted Access– Drupal ACL + Content Access Modules
– Training Videos– Book Pages– Etc.
COMMON MISTAKES
COMMON MISTAKES
COMMON MISTAKESCOMMON MISTAKES
Robots.txtUser-agent: *Crawl-delay: 10# DirectoriesDisallow: /i/
COMMON MISTAKES
– Not Everything Needs to be Editable
COMMON MISTAKES
– Not Everything Needs to be Editable• Menus• Website Logo• Views• Taxonomy• Etc.
COMMON MISTAKES
– Not Everything Needs to be Editable• Menus• Website Logo• Views• Taxonomy• Etc.
DANGER!DISASTER!
COMMON MISTAKES
– Set Permissions
COMMON MISTAKES
– Set Permissions– Set Per Admin Role Permissions
COMMON MISTAKES
– Set Permissions– Set Per Admin Role Permissions– Test as if YOU were the Admin
COMMON MISTAKES
<?php if ($user->uid): ?>LOGOUT HERE
<?php endif; ?>
PERSONAL MISSION
PERSONAL MISSION
PERSONAL MISSION
Allocate project budgetfor Admin UX design &
development
$$$
PERSONAL MISSION
Create the totalweb experience.
PERSONAL MISSION
Make it AWESOME!
![Creating Awesome Partnerships.ppt [Read-Only] Can't Do It... · Title: Microsoft PowerPoint - Creating Awesome Partnerships.ppt [Read-Only] Author: Steve Hensel Created Date: 5/12/2009](https://img.pdfslide.us/doc/110x75/603a0494e5c9a86f8e2d1101/creating-awesome-read-only-cant-do-it-title-microsoft-powerpoint-creating.jpg)
![[Srijan Wednesday Webinars] Creating an Awesome Organization by Weaving Great Experiences](https://img.pdfslide.us/doc/110x75/55d6e258bb61ebb10e8b46d1/srijan-wednesday-webinars-creating-an-awesome-organization-by-weaving-great.jpg)
