| Project: | AddThis |
| Version: | 7.x-4.x-dev |
| Component: | User interface |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
| Issue tags: | Needs usability review, Usability |
Issue Summary
Problem/Motivation
In the work to create a module that is helpfull straight out of the box I wanted to open the conversation/discussion (where applicable) around the structure and content of the configuration pages of the AddThis module.
The dev version that is used at this moment is rather unstructured. I don't mean that there is no structure but the structure is not aimed at the 80% of our customer cases. I like the UX proposition of the d7ux.org project that says:
- Make the most frequent tasks easy and less frequent tasks achievable.
- Design for the 80%
- Privilege the Content Creator
- Make the default settings smart
I'd like to take at least the first question in consideration when we look at the structure of the configuration pages.
Make the most frequent tasks easy and less frequent tasks achievable. My questions here are:
- what are the most frequent task people do?
- What are the default settings we have to consider and what is the impact of them?
- What settings do we collect close to eachother and what settings do we take, for example, to a different tab?
Proposed resolution
See proposed resolution at the #1 comment: #1303598-1: Structure of the configuration pages
Remaining tasks
- Define the most important settings.
- Remove unneccesary settings from the settings page.
- Define how to present the settings.
- Define default settings.
User interface changes
Lets take the tasks/questions in consideration first and then define the changes of the interface.
Comments
#1
Here is a quick sum up of thinks I want to see on the configuration page that are focused on global settings.
Profile
- ProfileID
User Interface
-
32x32 pixel toolbox(moved into Display Type settings)-
Use standard CSS override(moved to advanced tab)-
Number of preferred services(moved into Display Type settings)Compact menu
- Text color
- Background color
- Brand text
- Click to open
- Popup windows
- Delay
- Services compact (autocomplete)
Additional configuration
- 508 compliant
- Addressboek import
Third party integration
-
Add Twitter to toolbox(moved to Display Type settings)-
Add Google+ to toolbox(moved to Display Type settings)- Facebook namespaces
Analytics
- Checkbox click trackback
- Google Analytics Social tracking support
'Show when GA module is installed.
(subtab) - Enabled services
In this subtab the list with enabled services should be made available. This is for the settings
services_expanded.(different tab) - Advanced settings
- Widget js url
- Services css url
- Services json url
- Bookmark url
- Use standard AddThis css override
- Override json UI configuration
- Override json Sharing configuration
#2
A screenshot or two of the current situation would help the thinking around this. Great to see you taking this approach!
#3
Great idea to add some screenshots. I tried to make some screenshots but somehow it doesnt work. I'll see if I can get it to work somewhere else :).
#4
Here's a screenshot of the settings page in version 7.x-4.x-dev.
#5
Here is a example of the configuration page I have in mind. Its more structured, some things are removed and some text are rewritten. There is a collapsed and not collapsed version of the image. See the attached images.
Curious what you think. Please let me know.
#6
The configuration page has been updated with the remarks made in this issue. They are available in the latest dev release. Comments are welcome for now I mark this as fixed.
#7
Automatically closed -- issue fixed for 2 weeks with no activity.
#8
Before seeing this issue, I had already installed the latest 7x.4x dev and made some notes and screens. this are just what first came to my mind, hope they can be of some use.
#9
Here's some feedback for the Toolbox field display settings too.
#10
Hi andreas that is great feedback. I like that. I'll see if I can incorporate this. First I'll take moment and split it up in some tasks inside this issue. Great!
#11
Here is a short reply to the images. I did not have a lot of time but its a start.
- Change description on AddThis ProfileID.
"Only required for tracking and share statistics."
I have my doubt about adding the ProfileID field to the statistics fieldset. Maybe the other way around would be better. Add the statistics elements to the profile fieldset. Adding the link to the external registration page is a good idea.
- Service url's and advanced settings should go to a seperate tab. They are to in-depth to have here.
- We definitely need a better UI for the enabled service. And this needs better explanation. Some people think that you add the services as buttons to the widget this way. What did you expect of the 'enabled services' tab as to what it does?
- A list of where the addthis field has been added is a great idea. I'm not sure about the place of this information. Maybe we need some sort of a status tab with a overview of the settings and seperate pages to alter it.
- About the services field on the widget settings: they are related but they are not. :) They are related in the sense that they have the same list of names available. But they are not related in the sense that what you select in the one is effecting the other. They are completely seperate.
- Buttons size should be AddThis button style. These are basic settings from AddThis that apply a fixed icon style to the buttons.
#12
Thanks for the positive response. A few more notes:
"- I have my doubt about adding the ProfileID field to the statistics fieldset. Maybe the other way around would be better. Add the statistics elements to the profile fieldset."
- Sounds good. Main problem for me was the prominent placement of the profile id field on top of the page, making it look more important than it is.
"- A list of where the addthis field has been added is a great idea. I'm not sure about the place of this information. Maybe we need some sort of a status tab with a overview of the settings and seperate pages to alter it."
- This would solve one of the major usability issues with initial setup - not being able to provide a direct path for users from enabling -> initial settings (admin page) -> final setup (field settings). It would also stay relevant over time - displaying module status (where it's added) and would be re-used when adding new content types.
Therefore I think it should be fairly prominent - top of the page even. Or a link on top of the page to a separate menu tab? The list might get lengthy if there are lots of content types.
"- We definitely need a better UI for the enabled service. And this needs better explanation. Some people think that you add the services as buttons to the widget this way. What did you expect of the 'enabled services' tab as to what it does?"
"- About the services field on the widget settings: they are related but they are not. :) They are related in the sense that they have the same list of names available. But they are not related in the sense that what you select in the one is effecting the other. They are completely seperate."
- To me it was not clear at all that the "enabled services" fieldset only meant the buttons in the "pop-up" menu. Mainly because it's the only option presented directly on the settings page, but also a lack of instructions saying this.
- Maybe grouping the "User interface" and "enabled services" fieldsets under a menu tab/fieldset called "Addthis pop-up menu"?
Not sure about the name "Addthis pop-up menu", but to me it's the most straight-forward way of describing what it is.
- On the field settings pages the "Services" field should contain a default value with one or more services. For example "compact,tweet,facebook_like"
- Another problem with the link "The names on this list are valid." to the services directory is that the page doesn't list all available options, for example the facebook like and twitter share buttons. Maybe add an additional link to the 3rd party services page? https://www.addthis.com/help/third-party-buttons
- Maybe the "Enabled services" list should also contain the "machine name" too, for users to browse it? Like so: "[icon] Facebook Like (facebook_like)". Or maybe the link to the list on the field widget settings page would suffice. Might become bit messy though...
I've set up a Mockingbird project playing around with mockups. If you're up for it, send me a private msg with your e-mail and I'll invite you to it. Or I'll just publish some screens here when I've worked on it a bit more.
#13
@andreas_jonsson it would be great to have a look at the mockingbird project. I definetly like the ideas and thoughts.
There are also feature request that would be great to incorporate to enhance the user experience and initial setup. Especially the last (initial setup) is a problem for people I noticed. We made it flexible but the more complex. The Widgets module did a better job on usability when it comes to first time setup. Here is a introduction. What they did was use wizard to include them on different places.
Some food for thought.
#14
I have done some work and here is a patch. There is a new tab for advanced settings. I moved the enabled services to the compact menu and did some work on the google analytics tracking.