QUICK INTRODUCTION
People call me “GONZ”
QUICK INTRODUCTION
1. Never went to Art School
QUICK INTRODUCTION
1. Never went to Art School
2. Never took Computer Science class
QUICK INTRODUCTION
1. Never went to Art School
2. Never took Computer Science class
3. 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 c...
As website developers working in a
Content Management System like
Drupal, WordPress or Magento we
are poised with 2 main c...
As website developers working in a
Content Management System like
Drupal, WordPress or Magento we
are poised with 2 main c...
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)
– Ke...
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:
–...
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:
–...
BUILDING ADMIN UX
Some Helpful Tips:
– Keep Content Types Easy to Populate
– Keep Logic on the Backend
Favorite Modules:
–...
BUILDING ADMIN UX
Huge Fan of
Landing Page Editors
BUILDING ADMIN UX
BUILDING ADMIN UX
Keep the Admin
in one place &
make it easy as possible
BUILDING ADMIN UX
Admin input fields
should have meaningful
instructions.
BUILDING ADMIN UX
BUILDING ADMIN UX
<?php global $user;
if (is_array($user->roles) && in_array('administrator', $user-
>roles)) {
print '<a ...
BUILDING ADMIN UX
<?php global $user;
if (is_array($user->roles) && in_array('administrator', $user-
>roles)) {
print '<a ...
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
<?p...
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 U...
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 MISTAKES
COMMON MISTAKES
Robots.txt
User-agent: *
Crawl-delay: 10
# Directories
Disallow: /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.
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 budget
for Admin UX design &
development
$$$
PERSONAL MISSION
Create the total
web experience.
PERSONAL MISSION
Make it AWESOME!
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Creating Awesome Admin Experience
Upcoming SlideShare
Loading in …5
×

Creating Awesome Admin Experience

421 views

Published on

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.

Published in: Internet, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
421
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Creating Awesome Admin Experience

  1. 1. QUICK INTRODUCTION People call me “GONZ”
  2. 2. QUICK INTRODUCTION 1. Never went to Art School
  3. 3. QUICK INTRODUCTION 1. Never went to Art School 2. Never took Computer Science class
  4. 4. QUICK INTRODUCTION 1. Never went to Art School 2. Never took Computer Science class 3. Never won an Award
  5. 5. QUICK INTRODUCTION
  6. 6. SOME CLIENTS
  7. 7. SOME CLIENTS
  8. 8. SOME CLIENTS
  9. 9. SOME CLIENTS
  10. 10. SOME CLIENTS
  11. 11. SOME CLIENTS
  12. 12. SOME CLIENTS
  13. 13. QUICK INTRODUCTION We’re Hiring (shameless plug)
  14. 14. WARNING:
  15. 15. WARNING:
  16. 16. So why this session?
  17. 17. As website developers working in a Content Management System like Drupal, WordPress or Magento we are poised with 2 main challenges.
  18. 18. 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
  19. 19. 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
  20. 20. What we will cover:  Think Like an Admin
  21. 21. What we will cover:  Think Like an Admin  Building Admin UX
  22. 22. What we will cover:  Think Like an Admin  Building Admin UX  Common Mistakes
  23. 23. What we will cover:  Think Like an Admin  Building Admin UX  Common Mistakes  Personal Mission
  24. 24. As DevSigners – It is our responsibility to create the total web experience.
  25. 25. THINK LIKE AN ADMIN THINK LIKE AN ADMIN
  26. 26. THINK LIKE AN ADMIN 1. Admin’s 1st Impression
  27. 27. THINK LIKE AN ADMIN VS.
  28. 28. THINK LIKE AN ADMIN 1. Admin’s 1st Impression – Branded vs Blah UI
  29. 29. THINK LIKE AN ADMIN 1. Admin’s 1st Impression – Branded vs Blah UI – Keep it Simple (KISS)
  30. 30. THINK LIKE AN ADMIN 1. Admin’s 1st Impression – Branded vs Blah UI – Keep it Simple (KISS) – Customer Login vs Admin Login
  31. 31. THINK LIKE AN ADMIN 2. Admin’s Key Objectives
  32. 32. THINK LIKE AN ADMIN 2. Admin’s Key Objectives
  33. 33. THINK LIKE AN ADMIN 2. Admin’s Key Objectives
  34. 34. THINK LIKE AN ADMIN 2. Admin’s Key Objectives
  35. 35. THINK LIKE AN ADMIN 2. Admin’s Key Objectives
  36. 36. THINK LIKE AN ADMIN 2. Admin’s Key Objectives
  37. 37. THINK LIKE AN ADMIN 2. Admin’s Key Objectives
  38. 38. THINK LIKE AN ADMIN 3. Provide Training
  39. 39. THINK LIKE AN ADMIN 3. Provide Training – Video Tutorials
  40. 40. THINK LIKE AN ADMIN
  41. 41. THINK LIKE AN ADMIN 3. Provide Training – Video Tutorials – Blog Posts (restricted access)
  42. 42. THINK LIKE AN ADMIN 3. Provide Training – Video Tutorials – Blog Posts (restricted access) – Book Module (old school)
  43. 43. THINK LIKE AN ADMIN 3. Provide Training – Video Tutorials – Blog Posts (restricted access) – Book Module (old school) – Keep Front & Center
  44. 44. THINK LIKE AN ADMIN
  45. 45. AWESOME CUSTOM ADMIN MENU
  46. 46. SUPER HELPFUL HINTS
  47. 47. BUILDING ADMIN UX BUILDING ADMIN UX
  48. 48. BUILDING ADMIN UX BUILDING ADMIN UX ( Using Drupal Core )
  49. 49. Drupal Dashboard Module
  50. 50. Drupal Dashboard Module
  51. 51. Drupal Dashboard Module
  52. 52. Drupal Dashboard Module Get Creative Here
  53. 53. Drupal Shortcuts Module
  54. 54. Drupal Menu BUILDING ADMIN UX
  55. 55. Drupal Menu Block BUILDING ADMIN UX
  56. 56. BUILDING ADMIN UX Some Helpful Tips:
  57. 57. BUILDING ADMIN UX Some Helpful Tips: – Keep Content Types Easy to Populate
  58. 58. BUILDING ADMIN UX Some Helpful Tips: – Keep Content Types Easy to Pupulate
  59. 59. BUILDING ADMIN UX Some Helpful Tips: – Keep Content Types Easy to Populate – Keep Logic on the Backend
  60. 60. BUILDING ADMIN UX
  61. 61. BUILDING ADMIN UX Some Helpful Tips: – Keep Content Types Easy to Populate – Keep Logic on the Backend Favorite Modules:
  62. 62. BUILDING ADMIN UX Some Helpful Tips: – Keep Content Types Easy to Populate – Keep Logic on the Backend Favorite Modules: – Good ol’ Taxonomy
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. BUILDING ADMIN UX Huge Fan of Landing Page Editors
  67. 67. BUILDING ADMIN UX
  68. 68. BUILDING ADMIN UX Keep the Admin in one place & make it easy as possible
  69. 69. BUILDING ADMIN UX Admin input fields should have meaningful instructions.
  70. 70. BUILDING ADMIN UX
  71. 71. 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 Edit Link
  72. 72. 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
  73. 73. BUILDING ADMIN UX Take it a Step Further
  74. 74. BUILDING ADMIN UX Take it a Step Further – Design Your Own Admin Dashboard
  75. 75. BUILDING ADMIN UX Take it a Step Further – Design Your Own Admin Dashboard – Wireframe it Out
  76. 76. BUILDING ADMIN UX Take it a Step Further – Design Your Own Admin Dashboard – Wireframe it Out
  77. 77. BUILDING ADMIN UX
  78. 78. BUILDING ADMIN UX Take it a Step Further – Design Your Own Admin Dashboard – Wireframe it Out – /user-template.tpl.php
  79. 79. 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'; } ?>
  80. 80. BUILDING ADMIN UX Custom Admin Dashboard
  81. 81. BUILDING ADMIN UX Custom Admin Dashboard – Create a Custom Module
  82. 82. BUILDING ADMIN UX Custom Admin Dashboard – Create a Custom Module
  83. 83. BUILDING ADMIN UX Custom Admin Dashboard – Create a Custom Module
  84. 84. BUILDING ADMIN UX Custom Admin Dashboard – Create a Custom Module
  85. 85. BUILDING ADMIN UX Custom Admin Dashboard – Create a Custom Module
  86. 86. BUILDING ADMIN UX Custom Admin Dashboard – Create a Custom Module
  87. 87. BUILDING ADMIN UX Custom Admin Dashboard – Create a Custom Module
  88. 88. BUILDING ADMIN UX Custom Admin Dashboard – Create a Custom Module
  89. 89. BUILDING ADMIN UX Custom Admin Dashboard – Render a User Login Form
  90. 90. BUILDING ADMIN UX Custom Admin Dashboard – Render a User Login Form
  91. 91. BUILDING ADMIN UX Redirect Admin to Dashboard
  92. 92. BUILDING ADMIN UX Redirect Admin to Dashboard – Login Destination URL
  93. 93. BUILDING ADMIN UX Redirect Admin to Dashboard – Login Destination URL • If User Role = Admin
  94. 94. BUILDING ADMIN UX Redirect Admin to Dashboard – Login Destination URL • If User Role = Admin – Rules
  95. 95. BUILDING ADMIN UX Redirect Admin to Dashboard – Login Destination URL • If User Role = Admin – Rules • After Login -> If User Has Role = Admin => URL
  96. 96. BUILDING ADMIN UX Restricted Access
  97. 97. BUILDING ADMIN UX Restricted Access – Drupal ACL + Content Access Modules
  98. 98. BUILDING ADMIN UX Restricted Access – Drupal ACL + Content Access Modules – Training Videos – Book Pages – Etc.
  99. 99. COMMON MISTAKES COMMON MISTAKES
  100. 100. COMMON MISTAKES COMMON MISTAKES Robots.txt User-agent: * Crawl-delay: 10 # Directories Disallow: /i/
  101. 101. COMMON MISTAKES – Not Everything Needs to be Editable
  102. 102. COMMON MISTAKES – Not Everything Needs to be Editable • Menus • Website Logo • Views • Taxonomy • Etc.
  103. 103. COMMON MISTAKES – Not Everything Needs to be Editable • Menus • Website Logo • Views • Taxonomy • Etc.
  104. 104. COMMON MISTAKES – Set Permissions
  105. 105. COMMON MISTAKES – Set Permissions – Set Per Admin Role Permissions
  106. 106. COMMON MISTAKES – Set Permissions – Set Per Admin Role Permissions – Test as if YOU were the Admin
  107. 107. COMMON MISTAKES <?php if ($user->uid): ?> LOGOUT HERE <?php endif; ?>
  108. 108. PERSONAL MISSION PERSONAL MISSION
  109. 109. PERSONAL MISSION Allocate project budget for Admin UX design & development $$$
  110. 110. PERSONAL MISSION Create the total web experience.
  111. 111. PERSONAL MISSION Make it AWESOME!

×