Now that we’ve got a couple of rough patches (welcome screen, color picker, “view” my site) it’s time go back and test a few users in our first discovery cycle with these patches applied, and see if we’ve made any progress.
Here’s the video, and here are my notes:
Step two notes – Log in
No problems.
Step two notes – Explain what you see
No problems.
Step Three notes – Preview your blog
- 4:00 – She’s looking for a link
- 4:14 – “Oh here it is” – She clicks “Visit my blog” in toolbar (Win for “view” my site patch).
Step Four notes – Change your background color
- 5:45 – When asked to change the background color, she immediately (instinctively) clicked the big blue “customize my site” button (woot!).
- 5:55 – she easily found the BG color option in the customizer.
- 6:00 – Oh noooes, she found a bug in Iris (so painful to watch…)! clicking the right column of Iris does’t change the color in the text-field (After a bit of testing, it looks like if you click the right column first, before clicking the left gradient box, nothing happens. If you click, if you click the left box first, then the right column, it works as expected.) cc// @mattwiebe
- 8:07 – “Each time I view my blog it gives me a slightly different picture”.
- 9:10 – still trying to figure out why BG color isn’t changing – “I’m so confused”
- 10:30 – Moved on without being able to figure out how to change BG color.
Step Five notes – Change your site title
- 10:50 – Looking in Appearance -> Header for a place to change her site title (which really makes sense, we need to add a link there).
- 11:10 – didn’t find it in Appearance -> Header, no she’s checking all up and down the left nav
- 12:20 – Found it in the customizer
- 12:30 – What the? She couldn’t add spaces? That is weird. There is a bug in one of the patches? cc// koopersmith can you spot any reason why this would be happening in one of the patches listed above?
- 13:20 – “I’m very confused – I don’t know how I would insert spaces”
- 14:22 – gave up without being able to add spaces…
Step Six notes – Add your first post
No problems.
Step Seven notes – Preview your new post
No problems.
Step Eight notes – Publish an image
She found how to upload the image – not going to worry about anything after that for now, since media manager is being revamped. We’ll do plenty of user testing on the new media manager once it’s complete.
Recap
- Bug in Iris prevented her from changing her background color
- Can we please NOT have rotating header images in twenty twelve? None of the users we’ve tested have really comprehended what’s going on there.
- We really should add a link on “Appearance -> Header” to “Settings -> General” to change their site title or tagline.
- There was a bug in the customizer when she tried to update her site title which wouldn’t allow her to add spaces.
I’d like to get the color picker bug fixed before I run another user through these changes, but overall, I’d say these patches have already really improved things for first-time users. Thoughts?
lessbloat, 
Amy Hendrix (sabreuse) 4:58 pm on August 27, 2012 Permalink
I’m really excited about some of the improvements!
(And Twenty Twelve doesn’t ship with any header image at all — if anything, we’ll be documenting that yes, you can add a header, and you don’t need to go to some scary code-snippet back alley to do so.)
Isaac Keyet 6:06 pm on August 27, 2012 Permalink
Honestly it seemed like the main problem she had with changing colors was not the bug but that type of color picker altogether – a round color picker with the slider setting the black key (like the default apple picker) would probably be easier to comprehend for beginners. e.g.: http://cl.ly/image/061K1E1k2S2u
etoxin 7:42 am on August 28, 2012 Permalink
It looks like the actual picker (in the square) is far too transparent. Maybe a small subtle animation on click could solve this or a darker colour.
etoxin 7:50 am on August 28, 2012 Permalink
At 8:25 she gets the colour picker to work. Maybe simplify it to colour swatches and offer an advanced colour picker.
toscho 6:42 pm on August 27, 2012 Permalink
What a pleasant voice.
It should be possible to change the site title in Appearance/Header without going to settings.
And I think the pointer for media uploads is positioned a little bit too obtrusive. The Upload/Insert text is clear enough.
lessbloat 6:47 pm on August 27, 2012 Permalink
The fact that she saw that is a bug. That pointer shouldn’t even be showing unless they click the “Add images/media” link under the right column “Learn how to” section. I’ll look into suppressing that pointer unless they click that link. This implementation is just a stop-gap until we figure out how we want to connect the two related pointers. I didn’t want that to stop me from starting to test users, so I made a quick work-around (which unfortunately was buggy).
Peter Chester 6:49 pm on August 27, 2012 Permalink
I get so happy reading this! Rock on!!!
John Blackbourn (johnbillion) 7:07 pm on August 27, 2012 Permalink
Where did the “Install a new theme” pointer that popped up on step 5 come from?
lessbloat 7:12 pm on August 27, 2012 Permalink
Same bug as @toscho mentioned. I had forgot a “!” in the pointer code. This one should have only been triggered when the user clicked the “Change your theme” link in the right column of the welcome screen. Instead of only showing those pointers when the user clicked those links, I was showing the pointers all of the time, unless the user clicked those links…
Ah… what fun a missing “!” can cause.
Anyhoo. This is fixed now on my testing install, and should be good to go for the next user test.
Konstantin Kovshenin 4:26 am on August 28, 2012 Permalink
Why was she taken to Appearante – Themes in the first place? She was on her Dashboard, she clicked Customize, she saved and closed, and should be returned to where she initially was, her Dashboard. I pronounced the same “whoops” she did when watching the video
@koopersmith, I think we fixed “redirecting to where we came from” in the Customizer in 3.4? Did it break again or does it work for front-end only?
Daryl Koopersmith 5:20 am on August 28, 2012 Permalink
Neither — default behavior is to redirect to the manage themes page, and it doesn’t appear that these patches are using either of the methods that will cause the “return” action to redirect to another page.
We have two different solutions to do so: one is a query arg (see the admin bar for an example) and the other is customize-loader.js, which uses HTML5 history to maintain page state (used in the theme browser).
lessbloat 9:00 am on August 28, 2012 Permalink
Good catch. Ya, it would be great if clicking close would take her back to the dashboard, instead of themes.php.
Diana 11:01 pm on September 9, 2012 Permalink
Greate material! I would like to reinforce some aspects
:
)
This color picker is really confusing for most people, the tinyMCE text color is way more helpful providing some colors right on click .
In Customizing panel, the itens should be separated by area such Header, Content, Background etc , though this is more a theme author approach?!
Title and Description should stay within Header options, (not link to Settings).
The “Insert into post” button should be blue.
Most people access Dashboard instead using the left menu itens, then I think this panel should display icons/links for those panels with some short description. (People are afraid of going somewhere they can’t go back