WordPress.org

Ready to get started?Download WordPress

Make WordPress UI

Tagged: thx38 Toggle Comment Threads | Keyboard Shortcuts

  • designsimply 3:15 am on October 23, 2013 Permalink
    Tags: thx38,   

    THX38 0.7.1 User Testing 

    I put THX38 0.7.1 through some testing. Here are some clips showing the main points of interest. Most are around a minute or so in length, some are shorter.

    Accidentally clicks into the customizer and gets disoriented, first click on the “Customize” button doesn’t work (not sure why), thinks the magnifying glass hover icon indicates search:

    While the themes page is blazingly fast :) the customizer is slow:

    Suggests the “Delete Theme” button should be red all the time:

    Overlooks “Customize” button on the active theme:

    “Delete Theme” is a little hard to find for this user:

    Wishes clicking on the large screenshot in the modal would show a full view:

    Wants more screenshot detail:

    “Delete Theme” process not immediately visible, but found fairly easily:

    Theme description details are a little too technical, i.e. “post format-packed,” HTML, SEO:

    “Delete Theme” is easy:

    Keeps clicking the back button instead of the “x” in the modal and it disorients her a little:

    Tries right-clicking to delete:

    If you’d like to see the full videos, you can download them here: THX38 001THX38 002THX38 003THX38 004THX38 005.

    What would make finding really good themes easier? (survey question responses)

    • Tags or categories for subject matter, colors, or any number of style ideas and needs
    • Marketing maybe? Make it free?
    • If I were given an option of more than 20 themes to choose from, I would like to be able to choose by category, color theme, or complexity.
    • I can’t think of anything to really beat browsing. I mean, you could categorize them and even list them according to common uses (like Church) but I think I’d have to keep looking to find the perfect one. If you categorized based on HTML5 and all that, I think you’d lose a chunk of your user base (although having more technical categories for advanced users isn’t a bad idea at all).
    • The ability to search by genre. e.g. if I was a hairdresser key in the term hairdresser and get back a range of themes that could work for that business model. Complete with a choice of images would be fantastic.

    Key Observations

    • The magnifying glass/search icon was only mentioned by one user. The visibility icon could still be a good alternate because an eye symbol is often used for “view” online.
    • Themes load very fast! This makes it especially noticeable when the customizer loads slowly.
    • Viewing most themes on a brand new WordPress install is lackluster because there isn’t much data to customize per se.
    • Users had no trouble finding “Preview,” “Activate,” and “Delete Theme” in the modal when hover buttons were removed. Consider taking the hover buttons out. I know this adds one click to activating a theme (pushback if you feel strongly about it).
    • Noteworthy user suggestion:  make the “Delete Theme” button red all the time
    • Noteworthy user suggestion:  make it so you can click the screenshots in the modal to enlarge them (carousel style?) or make them zoomable

    All in all, the plugin is in really good shape. It’s fast! The “delete theme” link doesn’t get triggered accidentally but is still relatively easy to find. All of the bugs found via user testing were fixed in plugin version 0.8. If I could vote for two updates for v1, I would recommend: remove preview and activate hover buttons, change hover icon to a “view” symbol.

     
    • Lea Cohen 6:26 am on October 23, 2013 Permalink | Log in to Reply

      I have been following the posts and I love this plugin. If I could request one thing, I would appreciate RTL treatment :)
      I’ve never collaborated before in such things, so am not sure if and how I can help, but if there’s any way I can – I’ll be glad to.

      • Matías Ventura 4:50 pm on October 23, 2013 Permalink | Log in to Reply

        Good call — yes RTL will be added for sure. You are welcome to contribute anyway you can. We have chats on IRC on Tuesdays if you want to join. Otherwise you can keep participating on these threads.

        • Lea Cohen 12:32 pm on October 24, 2013 Permalink | Log in to Reply

          Could I help in implementing the RTL css in the plugin?

          • designsimply 8:15 pm on October 24, 2013 Permalink | Log in to Reply

            You could submit a patch. Do you know how to make one? I’d recommend starting with something very small and checking in with matveb to make sure you’re on the right track before doing more.

            • Lea Cohen 6:28 am on October 28, 2013 Permalink

              No, I’ve never submitted a patch. I agree with you that something very small would be a good start.

            • designsimply 9:04 pm on October 28, 2013 Permalink

              Do it! I found a basic tutorial that could help: http://www.doitwithwp.com/submit-patch-wordpress-core-beginners/ and you can ping me in #wordpress-core-plugins (or anyone in #wordpress) if you have questions.

            • Lea Cohen 6:21 am on November 4, 2013 Permalink

              Thank you so much, @designsimply. That’s a wonderful tutorial.

              I tried installing IRC on my computer, but we have a problem with open ports at my work. I’ll try contacting you from home, since I have a couple of questions. Thanks again for your support and encouragement!

    • biznis86 12:29 pm on October 23, 2013 Permalink | Log in to Reply

      I already suggested a concept without the popup modal, but haven’t received any response. Here is what I was thinking of:

      Also:

      • Move theme name above theme screenshot
      • Move all theme action buttons to the bottom of screenshot
      • designsimply 2:41 pm on October 23, 2013 Permalink | Log in to Reply

        The modal window is performing well in user testing. What problem are you trying to solve by trying to change it? I think one of the reasons for the theme name and action buttons being at the bottom of things is to put emphasis on the visuals, the screenshots specifically. Are your suggestions to move the theme name and action buttons a personal preference? Or how are you proposing that change will benefit users?

      • designsimply 3:30 pm on October 23, 2013 Permalink | Log in to Reply

        Btw, personal preferences are cool to bring up (you’re a user too!), but it would be awesome to include why you’d like to see things moved and how you think it will help along with the suggestions if you can.

        Aside: feedback on design (and reacting to it) is not as easy as it seems :) and my initial response sounded too defensive to me (maybe?) when I re-read it after posting. Anyway, I’m always looking for ways to get better at the feedback thing, both sides of it—just something that’s on my mind.

        • biznis86 3:56 pm on October 23, 2013 Permalink | Log in to Reply

          Sure, here are my arguments:

          Modals are not a good user experience, especially not on mobile devices. Inspiration behind my design comes from redesigned google image search, which was previously modal and is now similar to what I’ve posted. It works very well, at least for me. I really hate when links open in new window and I hate modals for the same reason. They add confusion and navigate user from their focus field.

          Theme name: there’s no reason to place it inside screenshot as it is not immediately visible to user. To make the name more obvious you need to add a background color to it and wrap everything with borders (which you did). But why? It would be simpler and nicer if you just added the name on top of screenshot, so the screenshot is cleaner and more obvious to user.

          Action buttons (activate, preview, delete, customize): It confuses users if they see buttons positioned differently on active theme and inactive themes and would be better to place them all at the bottom of screenshot. If you add theme name on top as previously suggested, you can also add “Active theme” text where theme name is currently positioned.

          I hope what I posted made any sense. As my company makes 90% of revenues from WP, it’s in my best interest to help as much as I can ;)

          • designsimply 4:13 pm on October 23, 2013 Permalink | Log in to Reply

            The modal isn’t used for mobile. The design is responsive. Try testing it out! Also, the modal isn’t done in a separate page load, so it’s super fast, which might help. Also, my role is more testing than design, so maybe one of the designers will chime in about modal vs. inline theme details.

            Ah, but I think the intention is to take away focus from the theme name and put it on the visual, the screenshot.

            It might be cool to experiment with user testing with the buttons in the detail view moved to the top. Are you interested in coding it up and running a test?

            • biznis86 4:26 pm on October 23, 2013 Permalink

              Do you need me to code our version of THX38 plugin or can we send over layered PSD file to save the dev work? Either way, no problem, first one will only take a bit more time.

              Otherwise, here is a fully sized screenshot of my previous image.

              I still believe, no matter how good modal is, it is never better than inline editing. Still, thank you for participating in this conversation – it just proves WP cares about users ;)

            • designsimply 4:31 pm on October 23, 2013 Permalink

              Do you need me to code our version of THX38 plugin or can we send over layered PSD file to save the dev work?

              For the button moving from the bottom to the top inside the modal? I’d suggest making a patch. I imagine you could do it with a bit of CSS. If you patch it, I’ll test it. Oh hey, I noticed the buttons are at the bottom of the description in your inline theme details mockup too! ;)

              it just proves WP cares about users

              True! so. true.

      • Matías Ventura 4:37 pm on October 23, 2013 Permalink | Log in to Reply

        One of the problems with the inline overlay is that we’ll run out of space quickly for the things we’d like to do, namely: more screenshots (gallery), showcase of real blogs using a theme, support forums, etc.

        Also, it doesn’t feel like the best use of space to duplicate the information (theme name + screenshots) on the same visual canvas.

        The overlay on mobile is a full screen page. Nothing indicates it’s a “modal” on that environment.

        Having said that, if anyone wants to code a version with the inline view and test it, I’d be happy to discuss it. I’m hesitant myself of modals, but in this case (with the url updating, arroy keys navigation, and being quite fast) think of it as a really quick “new page”. You can send people to themes.php#theme/twentyfourteen and it will open the theme for them, with all the details and actions at hand in a focused screen.

        Action buttons (activate, preview, delete, customize [...] you can also add “Active theme” text where theme name is currently positioned.

        We had this in one of the versions and eventually decided against it. The theme name is not that important and throws off the layout balance a bit when it is at the top.

        • designsimply 4:39 pm on October 23, 2013 Permalink | Log in to Reply

          themes.php#theme/twentyfourteen and it will open the theme for them

          I love that.

        • biznis86 5:09 pm on October 23, 2013 Permalink | Log in to Reply

          Not sure I agree that we’ll run out of space, since the modal is of the same size as inline overlay I suggested. More screenshots can be added the same way as to the modal. And user is never confused or disoriented. Although, some info is duplicated on the visual canvas, it follows user action, so there is no confusion about its purpose.

          One other benefit to inline overlay is also that you actually don’t need to “Add new” themes in a separate page. You could add new themes the same way with inline overlay at the end of themes list (with same Add New thumbnail you have now), so it would feel like you’re in control of your overall themes list and nothing would distract you from building it.

          You are spot on with URL updating and sending people to selected theme, but I’m not sure how many users will actually use this. This feature would only be usable if I could send my customers to their admin, where they could open/preview my custom theme (not yet installed) – if that is the case here, I’m really impressed and blown away really.

          I guess this is more my preference than a general opinion, so even if I feel really strongly about my case, I’ll stop here and won’t add more confusion to it.

      • Paal Joachim Romdahl 6:41 pm on October 23, 2013 Permalink | Log in to Reply

        Inline.

        • Keeps the connection with the other themes even when previewing.
        • It is easy to select another theme in the open preview area. One could also scroll through using the arrow keys having one theme after another open as a preview. Move the mouse inside the open preview and scroll to see additional screenshots and features. Or perhaps have small thumbnails below the main preview image. Clicking them opens into the main preview area. It seems like a good idea to code. To test out modal and inline methods.
    • Matías Ventura 4:25 pm on October 23, 2013 Permalink | Log in to Reply

      Thanks a lot for doing these.

      “Keeps clicking the back button instead of the “x” in the modal and it disorients her a little”.

      We can probably make it so the browsers back button takes you back to the grid view. I had it working with pushState but had to switch to normal hashes due to some troubles dealing with the .php extension of the themes page.

      • designsimply 4:33 pm on October 23, 2013 Permalink | Log in to Reply

        I thought you might appreciate the short video clip reporting format. :D

        Making the back button trigger the grid view would be awesome.

        Another idea: make the escape key exit the modal.

        • Matías Ventura 4:46 pm on October 23, 2013 Permalink | Log in to Reply

          Escape would be good, too.

        • Bryan Petty 6:56 pm on October 23, 2013 Permalink | Log in to Reply

          Both sound like good ideas, and escape is certainly standard.

          I think in general that all modal windows should probably be pushed onto the history stack honestly. Less of a specific theme issue here, and more of a general observation.

      • Andy Mercer 1:08 am on October 24, 2013 Permalink | Log in to Reply

        Having the back button return to the grid doesn’t necessarily make sense, but users (myself included) have been trained for decades that when you click something that makes the page change, the back button will undo it.

        Though it will probably add complexity to the code, I’d say it will be worth it just for the comfort factor, and for easing people in. It can always be removed down the line someday.

        • designsimply 9:16 pm on October 28, 2013 Permalink | Log in to Reply

          Clicking the back button could be perceived as broken if you’re in theme details view :) and it has to do with how the modal is setup. You can see it in the test above labeled “Keeps clicking the back button” where she clicks back and ends up on the main dashboard then has to navigate back to Appearance > Themes.

    • Archetyped 6:38 pm on October 23, 2013 Permalink | Log in to Reply

      Some thoughts/suggestions based on the videos

      Delete Theme

      • Delete option in grid view would be nice so that users can easily delete themes without having to go into a modal for every single theme. Using a simple trash can icon would be pretty much universally understood
      • Then, replace the “delete” button in the modal with the same trash can icon to standardize the UI in both views. This will make it less obtrusive while still easy to find when desired.

      View Icon

      The “eye” icon is scary and doesn’t really communicate “more detail” as well as it communicates “Eye of Ra”. The magnifying glass icon is a better direction and the functionality could be even better communicated by adding a “+” in the magnifying glass, which would give us the standard “zoom in” icon. It would communicate “zoom in for more detail” better than the eye.

      Modal

      The responsive modal works well. Normally a modal is a problem on mobile because they are generally not responsive so you have wasted space and positioning/scaling issues when the user interacts with the page. Here the modal is quite usable on mobile with large buttons and a simple layout.

      • designsimply 7:57 pm on October 23, 2013 Permalink | Log in to Reply

        Thanks for watching the videos!

        Two of the tests experimented with taking out all of the hover buttons all together. Even though a couple testers commented that the “delete theme” link is a little bit hard to find at first, most of them found it within a few seconds of looking around. Plus, it shouldn’t be too terribly easy to delete a theme, so I think the tests show it’s in line with the designers’ intention.

        It’s good to hear specific feedback about the icon. I never thought of the eye as scary! :)

        Cool feedback on the responsive design. I agree.

        • landwire 9:34 am on October 24, 2013 Permalink | Log in to Reply

          Delete:
          I also think there should be a “Delete” option in the grid view. Especially if there is another window popping up saying “Do you really want to delete XXXX theme”. So it cannot really happen accidental and that is the main concern I would think.

          • Matías Ventura 1:43 pm on October 24, 2013 Permalink | Log in to Reply

            I don’t think the frequency of deleting themes warrants the placement on the front — specially with the goal being to streamline the interface weight.

            We did play with a “bulk edit” mode in which you get an “x” to delete themes quickly. We couldn’t find an elegant way to invoke it, though. Still totally open to improving this in the future. Not sure it’s an area that warrants a lot of attention at this stage.

            https://cloudup.com/cdC2ME6Y1oK

            • Ipstenu (Mika Epstein) 2:04 pm on October 24, 2013 Permalink

              As someone who handles a lot of cases where people download a bajillion themes (seriously I deleted 30 off someone’s site this week) testing them out, and then never upgrade, a bulk delete option really is needed. Its VERY common for newer users to do that, and every time I give a session in how to use WP to the non-Tech people, I get asked ‘Why can’t I bulk delete?’

              I get why it’s not there now, but it needs to stay on the radar please :)

            • Matías Ventura 2:53 pm on October 24, 2013 Permalink

              Hah, thanks for the feedback from the front! It’s definitely on the radar, and we may very well get to it soon. Open to ideas about how to invoke the edit mode, if possible without another button next to “add new”. :)

        • Archetyped 8:09 pm on October 24, 2013 Permalink | Log in to Reply

          Why wouldn’t we want theme deletion to be easy? It’s an action that a user would feasibly want to do, so why discourage the it? There’s nothing inherently “bad” about deleting a theme.

          As theme deletion is destructive in nature, a confirmation of the action is important, which the popup handles. There’s no other reason to make it any more difficult than that.

          A trash can icon could be unobtrusive enough to not distract the user (like an always-on hot red button might), but would still be recognizable enough. In fact, after ages of UI conditioning, you could reason that a trash can icon is what users would actually be looking for when they want to delete a theme.

          Having to read the text of every button slows the user down from performing the desired action. While the a red-colored button may help to draw the eye to the button, it does nothing in terms of accessibility (e.g. color-blind users).

          • designsimply 8:17 pm on October 24, 2013 Permalink | Log in to Reply

            Looks like we’re going to try some bulk delete options, and I’m sure we’ll discuss a trash icon option in our next office hours. Thanks for the feedback!

  • Matías Ventura 5:40 pm on October 12, 2013 Permalink
    Tags: , thx38   

    THX (Themes) Update 

    The past week we’ve been committing significant updates to the plugin.

    Screen Shot 2013-10-12 at 3.19.55 PM

    Here’s a list of the changes that went in for version 0.7 (major props to @shaunandrews):

    • A lot of work went into rethinking how modal-overlay works and looks for showing the expanded theme view.
    • Adds keyboard navigation (with arrow keys) to quickly browse through themes while on details/modal view.
    • Significant JavaScript refactoring and cleanup.
    • Adds “delete” theme functionality.
    • Implements theme updates notices on theme grid, and update info on modal view.
    • Adds a theme count to the section title that updates immediately with search.
    • Several style improvements: theme blocks on grid view, add new theme, hover indicators, active theme more prominent, screenshot gallery with thumbnails, responsive styles, and a bunch more.

    The keyboard navigation is becoming a pretty nice way to quickly flip through themes.

    Screen Shot 2013-10-12 at 3.20.05 PM

    What’s left?

    Functionality wise it’s getting there, but we still have to keep polishing. (I’m being told modals are broken in Firefox.) We are a small team, so any reviews and suggestions are welcome — code or otherwise. Next up for JS rendering is looking into scaling issues (when, say, you have 200+ themes).

     
    • Ulrich 5:53 pm on October 12, 2013 Permalink | Log in to Reply

      Looks really good. :)

      Some strings are not internationalized or could be improved.

      There are some issues on the install theme page. The upload theme button is also missing.

      • Matías Ventura 5:27 pm on October 15, 2013 Permalink | Log in to Reply

        Added some more i18n. I should have mentioned it in the post but the theme-install page is all sort of broken. I’ll disable it until we have it more in shape.

    • biznis86 7:16 am on October 15, 2013 Permalink | Log in to Reply

      Not sure where to start. Overall, it’s nice, but loads of stuff is just wrong:

      • Missing upload button.
      • Missing navigation button (left,right) for multiple themes slider
      • If theme has no image screenshot, it gets crippled, plain white CSS image would be a good replacement
      • Spacing between theme thumbnails is not in line, top-bottom : left-right. Overall it’s too much white space
      • Magnifier icon on-hover doesn’t link to search, so it would be better to use icon that links to keywords “detail, more, open,…”
      • Instead of modals that are pretty bad for mobile experience, use sth like google image search has

      I hope my feedback helps in any way to make WP a better product.

      • shaunandrews 5:39 pm on October 15, 2013 Permalink | Log in to Reply

        Missing upload button.
        Missing navigation button (left,right) for multiple themes slider

        The install themes page is still a work-in-progress.

        If theme has no image screenshot, it gets crippled, plain white CSS image would be a good replacement

        Ah, thanks for pointing this out. We’ll look into supporting themes without a screenshot.

        Spacing between theme thumbnails is not in line, top-bottom : left-right. Overall it’s too much white space

        The spacing is a percentage, and varies depending on your window width. I think the whitespace is balanced well.

        Magnifier icon on-hover doesn’t link to search, so it would be better to use icon that links to keywords “detail, more, open,…”

        I’m open to other suggestions for the icon. The magnifying glass felt natural to me, but I can see your point about it being related to search. Perhaps the “eye” icon: https://cloudup.com/cY2LbtWKezc

        Instead of modals that are pretty bad for mobile experience, use sth like google image search has

        Did you look at the screen on a smaller device? Or just shrink your browser window down — The modal becomes a full-screen overlay at smaller sizes.

        I’m not sure what “sth” is…

    • alexdumitru 5:29 pm on October 15, 2013 Permalink | Log in to Reply

      I’ve just installed it on WP 3.7 beta 2 and it came with broken permissions. All folders were 750 instead of 755, so all files were returning 404.

      I think it must have something to do with MP6, as I’ve tried installing other plugins too and they do work very well.

      • alexdumitru 5:30 pm on October 15, 2013 Permalink | Log in to Reply

        P.S. I LOVE MP6. It looks wonderful !

      • designsimply 4:45 pm on October 19, 2013 Permalink | Log in to Reply

        The THX38 plugin files were the wrong permissions, or the MP6 ones? Did you install the plugin by going to Plugins > Add New > Search and clicking the “Install Now” link? Could you try deleting the plugin and installing it again using that route? If you see the same problem happen again, could you start a help request at http://wordpress.org/support/ and link it in a reply here?

    • TimothyBlynJacobs 9:20 pm on October 17, 2013 Permalink | Log in to Reply

      Looks really awesome. Curious, why did you round off the previously square version box. I think it looks far better without the rounded corners – they seem out of place since the rest of the modal is highly rectangular.

    • JakePT 6:28 am on October 22, 2013 Permalink | Log in to Reply

      Minor criticism: The Updates available banner doesn’t really stand out. At first, out of the corner of my eye, I thought it was just part of the theme.

      Perhaps putting it next to/near the name of the theme would work better?

    • designsimply 3:16 pm on October 22, 2013 Permalink | Log in to Reply

      Over the weekend, I tested these actions with WP 3.6.1, MP6 2.1, THX 0.7.1:

      • hover > preview button
      • hover > activate button
      • hover > details
      • hover > details > keyboard shortcuts
      • hover > details > preview
      • hover > details > activate
      • search (check that the count is correct)
      • add new theme
      • delete theme
      • speed tests with 230+ themes installed

      ^^ Did I miss any actions here?

      In these browsers:

      • IE10 on Win8 via browserstack.com
      • Chrome 30.0.1599.69 on Mac OS X 10.8.4
      • Firefox 24.0 on MacOS 10.8.4
      • Safari 6.0.5 on MacOS 10.8.4
      • Safari on iOS 6.1.3

      And found these bugs (most of which I think Matias has already fixed in the plugin trunk):

      Asides, AKA things I don’t want to forget about the nifty new multiple screenshots feature:

      • To use multiple screenshots, add files named screenshot-2.png, screenshot-3.png, etc.
      • You can have up to 5 screenshots
      • Screenshot files should be 4:3 or larger aspect ratio
    • designsimply 8:38 pm on October 22, 2013 Permalink | Log in to Reply

      Noting a couple additional bugs found in 0.7.1 and already fixed in 0.8:

      Bugs I’m still seeing in 0.8:

      New 0.8 bugs:

      This set of tests were done with WP 3.6.1, MP6 2.1.1, THX38 0.8 on Chrome 30.0.1599.101, Safari 6.0.5 on Mac OS X 10.8.5.

      If anyone else is able to do a little more testing on Windows 7 and 8, that would be appreciated because I spotted some troubles in user testing (such as not being able to see scroll properly and see long theme descriptions in the modal) that I couldn’t reproduce in my own testing on Windows via browserstack.com.

    • designsimply 1:17 pm on October 25, 2013 Permalink | Log in to Reply

      Noting one additional bug reported by siobhyb on the make/core proposal post.

      Tested with WP 3.6.1, MP6 2.1.1, THX38 0.8.2

    • Terry Sutton 7:37 pm on October 29, 2013 Permalink | Log in to Reply

      Hey All

      Apologies for being a bit (very?) late on this, but I just had a look at the ui this afternoon. First like to say great job. It cleans up that page quite a bit.

      My only feedback is that the ui around the thumbnails feels a bit heavy. When the active thumbnail’s theme has the Active/Customize bar at the top, it feels like a lot of the thumbnail gets lost. Here’s a quick pass at trying to keep everything at the bottom of the thumbnail.

      https://cloudup.com/cD9NoPW3WSE

      But that’s just my two cents — I know I haven’t been active in this development all the way along, so I’m not up to speed on where / how this grew to its current state.

      Thanks guys, and great work!

      Terry

  • Matías Ventura 6:27 pm on September 25, 2013 Permalink
    Tags: , thx38   

    THX38 Update 

    We’ve been busy building and improving the plugin. We are approaching the point of a full feature prototype, which will allow us to start testing smaller incremental changes.

    I committed the first pass at the browse themes screen based on the mockups we’ve discussed before:

    Screen Shot 2013-09-24 at 4.30.13 PM

    By the way, we are running a bit short on development resources, so if you are proficient in PHP and/or JS and want to contribute to this project, please, either chime in to one of our weekly chats or ping me directly. We are using Backbone to build all the theme views. We started a short document with the current tasks.

    Screen Shot 2013-09-24 at 4.29.43 PM

    We have two tasks going on: make theme switching work with the current prototype, and finish implementing theme fetching to the install-themes screen.

     
  • Matías Ventura 8:01 pm on September 5, 2013 Permalink
    Tags: , , thx38   

    Update on THX38 

    Things have been in motion for the themes project. I’ve been working on making the plugin prototype ready for some initial testing. It’s looking like this:

    @shaunandrews ran a test with it, and here’s the video.

    Compared to how bad last test went, it’s pretty cool to see the dramatic effect the “add new theme” block had. (Also helped by the removal of the tabbed interface and extra information.) The user grasped immediately that she was seeing some themes that were already available to her blog, and how she could add more. Fairly straightforward, which is all this test was about.

    Then, of course, as soon as she got to the filters page everything went down again, but we already expected that — still good to have one more test showing the same fundamental problem there.

    Directions

    On last Tuesday’s meeting we discussed the different mockups that were shared so far, apart from the plugin ones.

    It seems we have mostly two directions to try for themes.php. The one the plugin is building (simplify the screens, remove the tabs, but keep a distinction between “your themes” screen and “installing new ones”), and one that merges installing new themes with your currently installed themes on the same screen. As a quick analogy, themes.php as your apps folder, or themes.php as an app store. Another possible outcome is that this screen could render a specific experience for new users alone.

    Shaun is polishing his prototype so we can test it. We argued that it would be hard to know which of these two was the better one, since we would also need to test with people that already have a bunch of themes installed and don’t care much about the discovering new ones part. But having some insight is still good.

    Finally, we talked briefly about multi-screenshot support. The plugin has a proof of concept implementation, showing the screenshots on the expanded view of a theme as a gallery. To test it, add a screenshot-2.png image to the root of a theme (up to five). Also relevant core ticket: #19816.

     
    • Mel Choyce 8:05 pm on September 5, 2013 Permalink | Log in to Reply

      Is it too late to submit some wireframes? I was sketching out some ideas this morning after playing around with your prototype plugin.

      • Mel Choyce 3:56 am on September 6, 2013 Permalink | Log in to Reply

        Here’s my take:

        Theme library: http://cl.ly/image/1m1S0j1L4438
        Add theme: http://cl.ly/image/020O173Q1V3w
        Theme detail page: http://cl.ly/image/3P1S2M1x3g0y

        I can post these up somewhere with explanations/rationalizations if needed.

        • Helen Hou-Sandi 4:27 am on September 6, 2013 Permalink | Log in to Reply

          Love: “theme library” language, having upload via zip right there on the add screen, real-world theme examples (see below, though).

          Concerns: filters separated into tabs – which filters apply to the current view? Also the differently sized featured theme slot and real-world showcase pieces – both of those give me the political heebie-jeebies.

          • Mel Choyce 2:41 pm on September 6, 2013 Permalink | Log in to Reply

            Showcasing real-world theme could potentially be a nightmare. :) But I figured it would be worth playing around with.

            I was trying to mimic .com’s theme showcase filters: http://theme.wordpress.com/ Though those end up being a little different, because the filtering happens in realtime.

            • Helen Hou-Sandi 3:10 pm on September 6, 2013 Permalink

              Gotcha – so a “how many of these are applied” count appears. Interesting.

              I sort of wish we could do super simple filtering (like, a dropdown and pick one thing) but that might be taking things too far down.

            • Mel Choyce 3:22 pm on September 6, 2013 Permalink

              @helen I’ve actually found .org theme filtering to be really useless. :) Wonder if it’s worth totally reconceptualizing and going with something simpler.

            • Matt McLaughlin 3:49 pm on September 6, 2013 Permalink

              Agree that filters are useless. The UI you have below the filters reminds me a lot of the Netflix UI (which is itself imperfect but…)

              What about offering suggestions a la Netflix. That’s essentially filters, but the filtering is automated into (sometimes complex) suggestion categories:
              -Recently Browsed Themes
              -Popular Themes
              -Because you’ve liked themes with a strong female lead… errr… Because you like themes with a responsive layout and bright colors.

              • Because you’ve liked themes with 3 column layouts and a static front page

              Essentially you would pull info from the themes they already have installed and maybe some additional information from themes they chose to preview and create a user profile from which to build personalized suggestion categories.

            • Matías Ventura 5:34 pm on September 6, 2013 Permalink

              Filters are tough. I think most of the concrete ones (columns, features, colors, responsive, etc) can be elegantly incorporated to the search form — if you search for “two columns” we detect that as a tag and show it to you with autocomplete as a recognized term, for instance.

              Then that leaves us with categories (subjects on .com) which we discussed as part of the “app store” paradigm and can be displayed much more prominently (photography, magazine, portfolio, etc).

        • Matías Ventura 5:27 pm on September 6, 2013 Permalink | Log in to Reply

          Awesome, thanks, not late at all! Your mockups apply to the plugin’s current direction of separate screens, so whenever we get to refine that these will be handy.

          I like a lot of the details you introduced, and we can plan for testing some variations soon as well. I’m interested in your rationale for making the current theme so prominent? I think it takes a lot of unnecessary space that doesn’t correlate with its value (theme description, etc) at that stage. Also, from watching the first video test, I got the impression it contributed to the user’s confusion on that screen.

          • Mel Choyce 1:58 pm on September 9, 2013 Permalink | Log in to Reply

            A couple reasons:

            • I wanted your current theme to be explicitly obvious — I think just highlighting your current theme could be really easy for users to overlook. I think having it more prominently positioned helps create better hierarchy and understanding between what you’re currently using and your library of themes.
            • I personally love the widgets/menu/header/background/etc. links and use them all the time as “quick links” when I first activate my theme and want to set everything up. They’re a good “next steps with setting up your site” indicator for users

            Doesn’t need to be as prominent as it currently is — I just wanted to give it more emphasis that everyone else has been mocking up, so I kept it the same as it currently is on the themes page.

    • Matt McLaughlin 8:37 pm on September 5, 2013 Permalink | Log in to Reply

      Do we have any idea of how often people install a new theme without switching to it? My naive guess is that it’s not too many (but obviously data trumps…)

      I ask because the whole “Add a Theme” is tough to grok for new users. A simple change from “Your Themes” to “Recent Themes” and “Switch Theme” instead of “Add Theme” would abstract away the fact that you’re installing anything.

      I’d also be interested in how many people install themes from .zip versus through the interface. If it’s a sufficiently small number it might be good to tuck that functionality away in an “Advanced” area rather than clutter up the average user’s interface with it.

      • Chris Jean 8:45 pm on September 5, 2013 Permalink | Log in to Reply

        Please keep in mind that not all themes come from wp.org. Without trying to start a debate about paid themes, they do exist and tucking the abiltity to install them away in a low-discovery area would do much to hinder the use of them.

        • Matt McLaughlin 8:52 pm on September 5, 2013 Permalink | Log in to Reply

          I’m all for paid themes, put it’s only inertia that makes paid themes = .zip files. Why not work on making paid themes as easy to access as wp.org themes? Why not make it easy for theme creators to get their themes in front of users right in the interface?

          That could really increase the audience for (and income of) theme creators. It would also provide a much better user experience than the frankly totally hostile experience of having to upload a .zip file.

        • swissspidy 3:09 am on September 6, 2013 Permalink | Log in to Reply

          Maybe we can show the list from http://wordpress.org/themes/commercial/ to highlight some GPL compatible commercial themes?

    • Matt McLaughlin 8:59 pm on September 5, 2013 Permalink | Log in to Reply

      Here’s another naive question. Why do we separate out “Preview” and “Live Preview”? In posts and pages, when I click preview, it shows me how that post or page is actually going to look with my content. For Themes, preview shows you how the layout looks with someone else’s placeholder content. That’s inconsistent.

      I would suggest either a) getting rid of the difference and making everything a “Preview” with the user’s content – downloading the theme invisibly in order to do so and cleaning up the files later. or b) Rename “Live Preview” to just “Preview” and renaming what is now “Preview” to “See Example” or some such.

      • Matías Ventura 5:42 pm on September 6, 2013 Permalink | Log in to Reply

        We discussed this in one of the chats. We do want to make all previews work with your content. If that turns unfeasible we’ll probably call them “live demo” or something like that when you preview a theme you don’t have installed.

    • Paal Joachim Romdahl 9:35 pm on September 5, 2013 Permalink | Log in to Reply

    • Matt McLaughlin 7:17 pm on September 6, 2013 Permalink | Log in to Reply

      Here’s a mockup of a single page with modals concept that abstracts away the concept of installation and renames “Previews” “More Info” and renames “Live Preview” simply “Preview”:

      http://mattnamclaughlin.wordpress.com/2013/09/06/themes/

    • Paal Joachim Romdahl 6:31 am on September 7, 2013 Permalink | Log in to Reply

      These mockups are really good Matt!

  • Matías Ventura 5:47 pm on August 20, 2013 Permalink
    Tags: , thx38   

    Team THX38 had its first formal meeting yesterday. See logs.

    We talked about the things we see as more problematic, and spent some time discussing Filters/Search, as we identified that as an area with huge room for improvement. If you have read Dave’s post on design processes, this in area where we would benefit from exploring a bunch of quick directions that we can later test, so feel free to submit ideas.

    Shaun also shared the usertest video he ran. Some interesting points from the video:

    • It was pretty clear that discovering new themes was not easy at all. The amount of time between arriving at themes.php and actually seeing new theme screenshots was huge. (The direction of the initial concepts I posted before address this issue by putting a new empty theme-block at the end of the grid of currently installed themes that says “Add new theme”, and gets rid of the tabbed interface. That would be something to test.)
    • “I was thinking I would have a screen with a bunch of themes to look at”. This is a nice way to put it. :) She says this when clicking on “install themes” and seeing the entire screen covered with checkboxes. It seems we have this backwards with “search” being the first tab selected, you should be able to get into screenshot-browsing right away and maybe refine with searches and filters along the way. (Another thing we discussed were “categories” like photography, food, etc.)
    • Filters names don’t mean much visually — or rather, they mean different things to different people — so it’s a rough place to start with. The user later mentions she just wants to browse through images and see what jumps at her.
    • While browsing, it would be a nice experience if installing a theme was not disruptive — you click install and maybe see a progress bar on top of the screenshot, but you can still keep browsing and installing other themes.
    • Once you installed a theme, the message and screen you are sent to is a bit underwhelming.

    Comparisons to existing theme/template showcases were brought up: WP.com themes, Squarespace, Tumblr, Weebly, to name a few. The plan is to report back the findings at next meeting, so those interested, please, grab one and research what you like and don’t like (with images!) for the discussion. Put your name in the comments so we know we have things covered.

    Plugin

    I set up an initial plugin for the project that you can grab at http://wordpress.org/plugins/thx38/. Note: it currently makes themes.php unusable, it’s only meant for us to play with as we go. It setups your theme collection in Backbone.

    Change of meeting time

    We are switching the day of our chats to Tuesdays. So next gathering will be on August 27th at 18:00utc.

     
    • Ulrich 7:10 pm on August 20, 2013 Permalink | Log in to Reply

      The video was interesting. Something that I realized when watching it was the there is a text saying “Available Themes” for the installed themes. I feel that as a first user you might think that there are only two themes to choose from.

      I seemed to be missing the audio to the video is that correct?

      • Ulrich 8:51 pm on August 20, 2013 Permalink | Log in to Reply

        I am just silly, I pulled the speaker plug out and was wondering why I had no sound. :-s

    • Emil Uzelac 9:17 pm on August 20, 2013 Permalink | Log in to Reply

      Here’s quick draft for Shaun’s video (just to give you an idea, nothing more, nothing less)

      Remove all Theme Names, focus on design and show them on mouseover only. Same goes for the author.

      Use, or re-use what we have in directory. Featured, Newest etc Themes.

      Show 4 Themes from each section, with an option to see more.
      Recently updated excluded, but it can be added.

      http://index56.com/wp-content/uploads/2013/08/quick-draft.png

    • Bryan Hadaway 11:23 pm on August 20, 2013 Permalink | Log in to Reply

      Hey guys, I’ve been pushing suggestions for theme browsing improvements for a while now, even well before this project existed. It’s actually a bigger problem than just for end-users, but also for theme authors as well for far too long.

      Even if I wanted to officially join the project I wouldn’t really be able to make the meetings anyways, so I’ll lay down my ideas and if anyone that can actually do anything about them that also finds my points to be valid wants to carry that torch into a future meeting, please do.

      1. Theme descriptions are just big, plain, hard to read walls of text. This is neither helpful for users that are reading them or theme authors that are trying to convey important information. Strangely enough, for a long time theme descriptions did allow for a limited amount of HTML in order to distinguish descriptions better and link to docs/info/whatever.

      Only a few days ago, when I updated one of my themes, this was still possible:

      http://wordpress.org/themes/blankslate

      Now, descriptions appear to have been completed reduced to plain text essentially destroying the description I created that contained important links to docs/warnings/support and other useful info for the user. Whoever made this change has taken a step backward from what you guys are trying to do, might want to look into that and make sure everyone’s on the same page.

      Plugins are definitely doing a lot of things right:

      http://wordpress.org/plugins/contact-form-7/

      Infinitely better description, readme, changelog and so on.

      2. Plugin authors are able to sticky important topics in their forums, theme authors still don’t have this permission.

      So, I think just looking at the way plugin browsing works would be a great place to start next after you guys work out the game plan for improving search tags.

      Thanks, Bryan

    • Sam Sidler 8:06 am on August 21, 2013 Permalink | Log in to Reply

      One thing we also talked about at the meeting was an “app store” mentality for themes. In general, people have a good idea of how to use app stores on their phones and on their computers (but more so on their phones). That model seems to be successful, with a “Featured” section, a “Top” section, a “Categories” section (with its own featured/top sections), and a search section. We probably can’t duplicate it exactly – and I’m not sure we’d want to – but it’s worth investigating a model like that.

    • Paal Joachim Romdahl 10:04 pm on September 1, 2013 Permalink | Log in to Reply

      I added some of the mockups talked about during the last chat and created some of my own as well:
      http://easywebdesigntutorials.com/wordpress/wordpress-theme-browser-mockups/

      • Paal Joachim Romdahl 7:27 am on September 2, 2013 Permalink | Log in to Reply

        One of the stumbling blocks for new users today is creating a child theme. Understanding what they customize in their theme might be overwritten when they update the theme. We need to find a simpler way to handle this.

        Some options as I see them:

        1. Have an obvious button called Child theme next to Customize as I have added into my two mockups (link above).
        2. The first option in the Customizer could be Create a Child Theme.
        3. Keeping it mostly invisible in the background. Clicking Activate Theme automatically creates a Child Theme. With an added extension called perhaps something like Twenty Eleven in use/Child, or some other unique extension.

        What can be confusing is that people will see two themes. Twenty Twelve and then the added Twenty Twelve in use/child. So perhaps keeping the parent in the background in some way having the child most visible can be a solution. Other solutions?

        I do not know if this is outside of the scope of the Theme Browser experience as this topic really does touch upon Theme selection and use.

      • Emil Uzelac 1:03 am on September 3, 2013 Permalink | Log in to Reply

        Thank you :)

  • Matías Ventura 7:56 pm on August 16, 2013 Permalink
    Tags: , , thx38   

    THX38 project and weekly meetings 

    Hello all. Team THX38 will be working on the Theme Experience project, spanning the theme admin screens as well as improving the .org directory. Check our initial overview for information on our goals and the pain points we want to address. We also have some visual concepts there to start the conversation.

    Weekly office hours

    We’ll be meeting in #wordpress-core-plugins on Monday, August 19 18:00 UTC. If this works out we’ll keep this time going forward.

    Current Team

    @matveb (lead), @samuelsidler, @melchoyce, @shaunandrews, @jacobdubail. The following people have also expressed interest in helping when time permits: @helen, @bpetty, @sabreuse

    If you’re interested in contributing to the project, leave a comment here and let us know!

    Next steps

    For next week, Shaun will be working on running some tests around themes.php, and we’ll also be setting up a plugin soon so we can start playing with these ideas. See you around!

     
    • harribellthomas 8:00 pm on August 16, 2013 Permalink | Log in to Reply

      I’d love to help and contribute and give something back to the community (time permitting of course). You can find me at @harribellthomas. If there is anything I can do/help with, please let me know. (I am primarily a plugin author, and am familiar with PHP coding).

      Harri

      • Sam Sidler 9:24 pm on August 16, 2013 Permalink | Log in to Reply

        Great! Be sure to join us for our meeting on Monday and start getting involved. Even if you get too busy to participate every week or contribute code, we’d love to have help in the form of feedback as the project moves forward. :)

    • paaljoachim 12:02 pm on August 17, 2013 Permalink | Log in to Reply

      What about adding a button next to customize in the detailed theme mockup called “create child theme”?
      It would be nice to select a theme and then easily make a child theme out of it.

    • pixels72 11:26 pm on August 17, 2013 Permalink | Log in to Reply

      I’d also like to help out and contribute here (time permitting). My experience is in front end design-development / UI.

    • Chip Bennett 1:02 am on August 18, 2013 Permalink | Log in to Reply

      Please keep the Theme Review Team in the loop, in case there’s anything we can contribute, or in case anything that you come up with might impact the Theme Review guidelines.

      (Something that I know would be hugely popular with Theme developers is the ability to have multiple screenshots. A “mobile” screenshot would also be quite popular, I’m sure.)

    • JoshPollock 1:55 am on August 18, 2013 Permalink | Log in to Reply

      I’d definitely like to be involved, especially in regards to theme browsing on .org. I will be at the meeting on Monday. I am @shelob9 on freenode and wordpress.org. I’m an active member of the theme review team, and would happy to make reports on this project’s progress to the theme review list and bring the team’s reactions back.

      Is it possible for that the concept drawings that are linked from the overview be posted as .psd or .ai files?

      • Matías Ventura 9:44 pm on August 18, 2013 Permalink | Log in to Reply

        Great, see you on Monday then. The concepts were done using the Balsamiq Mockups app, which sadly seems to output only pngs or pdfs. It’s a good topic to discuss at the meeting, anyways — how to better share and contribute to these early stages assets.

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel