Make WordPress UI

Updates from JohnONolan Toggle Comment Threads | Keyboard Shortcuts

  • JohnONolan 7:44 pm on March 1, 2011 Permalink
    Tags:   

    Summary for March 1st 2011 UI Chat 

    Limbo chat! Getting ready for 3.2 and figuring out what’s what and who has interest in working on specific projects for 3.2.

    • andewryno – looking at outputting semantic markup through WP settings API – working directly with Nacin on this
    • Chexee / saracannon – focusing on visual design tasks (TBC)
    • JohnONolan – will continue his CSS crusade, mostly
    • TECannon – accessibility design / docs
    • jsternberg (new member) – interested in some design / CSS tasks

    Short review of Chexee’s “Press This” bookmarklet button – concensus leaning heavily towards the left (lighter) buttons and generally towards the top of the list to match browsers and avoid confusion with rounded action-buttons. Some concerns raised over UX behind the literal meaning of the words “Press This” on a button. Suggestion was also raised for cursor hove state to be a 4-way grabber instead of a pointer to better indicate intended use.

    Aiming to have a 3.2 UI roadmap for next week’s meeting.

     

    • Chelsea Otakan 5:18 am on March 2, 2011 Permalink | Log in to Reply

      PS. Might want to talk to Ben Dunkle about doing a custom icon for this. I used one of the rejected icons from the review as I can’t at all replicate his lovely style

    • jane wells 11:58 pm on March 7, 2011 Permalink | Log in to Reply

      There will not be a 3.2 UI roadmap for next week, because there is not a 3.2 roadmap in general yet. This week the leads will be doing a post-mortem on 3.1, with the intention of talking about 3.2 the following week.

    • JohnONolan 3:30 pm on March 9, 2011 Permalink | Log in to Reply

      I’ve stumbled across this 3 times in the last week:

      http://cl.ly/56dE

      Problem:

      My folder permissions are set up wrong and when I try to install the WP importer it fails. I don’t read the text, I just click the “back to importers” button and then wonder why it’s still asking me to install a plugin to do an import.

      Solution:

      1.) Make it obvious when something has failed.

      2.) Once I’ve gone an fixed my folder permissions, let me come back to the same page and click on “retry” instead of going all the way back through the menus all over again.

    • JohnONolan 2:27 am on March 15, 2011 Permalink | Log in to Reply

      Another random issue this week: http://cl.ly/5EK0

      IMO they should both open in the same window – if the user wants to open a link in a new window/tab then they should do so with the browser.

    • Bjarni Wark 10:06 pm on March 21, 2011 Permalink | Log in to Reply

      Hi John,

      I wanted to ask about joining/contributing toward the graphics/UI of WordPress, is this the place it happens?

    • Bjarni Wark 10:14 pm on March 21, 2011 Permalink | Log in to Reply

      For starters in reply to the bookmarklet button, definitely the left. In regards to the overall design of the button then I would be looking at all the types of buttons and there related specific functions then grouping them. Then creating a style for the button group so you can visually identify that this button belongs to this particular function group etc.

      • Chelsea Otakan 5:49 pm on March 22, 2011 Permalink | Log in to Reply

        This would probably be a one-off style unless we were to implement more bookmarklets into core. More revisions will probably make it look less like a button (since its not really a button that you push to make something happen)

  • JohnONolan 4:28 pm on January 19, 2011 Permalink
    Tags:   

    For anyone who cares about font-stacks, pls add your thoughts RE the removal of Lucida Grande

    http://core.trac.wordpress.org/ticket/16298

     

  • JohnONolan 2:15 pm on November 30, 2010 Permalink  

    Hi guys,

    Jane and I are both out and about today so no official meeting. That being said, please still go ahead and have an informal discussion, two main points to cover:

    • What are your thought’s on the issue raised by Simon, below?
    • Could you all please brainstorm some ideas for UI tasks for GCI students? If you think you could mentor any of the list which you come up (comment in reply to this post) with then please also include:
     

    • saracannon 10:33 pm on November 30, 2010 Permalink | Log in to Reply

      Here are some kind of non-specific things that I would love to mentor.. but really I’m up for anything else y’all would rather me do or tasks that are needed more:

      Tasks relating to: “Site design for wordpress.org. As we improve the site, we will be restructuring the information architecture and possibly updating the visual design. Will list tasks related to both IA and graphic design.” (SaraRCannon [at] gmail.com)
      Any design tasks Blue or Grey admin theme related (this could get really specific and relate to trac) (SaraRCannon [at] gmail.com)

      Also talked about:

      Possible UI Documentation Organization / Editing / PSD repository (TECannon?)
      and semi related: If we don’t see a move to .org in the near future: a better theme for http://dotorgstyleguide.wordpress.com/outline/
      Network and User Admin Differentiation Improvements
      Usability Testing (does anyone have experience in this and can mentor?)

    • George 3:16 am on December 1, 2010 Permalink | Log in to Reply

      Hey, I’m new to the community. I’d love to work on a new them for http://dotorgstyleguide.wordpress.com/outline/ if it’s something you’re interested in.
      Also, usability testing is pretty straightforward. Google’s A/B Testing stuff is awesome, as well as some of the paid programs like KISSMetrics and GazeHawk.
      A wordpress UI forum would be pretty cool, built on bbPress.

      • Jane Wells 1:55 pm on December 19, 2010 Permalink | Log in to Reply

        Welcome, George! Can you leave a comment and tell us a little bit about yourself/your design background/where you work/links to portfolios, etc? It will help us know the best place to utilize your talents.

  • JohnONolan 11:42 pm on November 23, 2010 Permalink
    Tags:   

    Summary for November 23rd 2010 UI Chat 

    Good meeting today

     

    • Simon Wheatley 11:57 am on November 24, 2010 Permalink | Log in to Reply

      Hi UI Gang,

      I want to push discussion of an issue I outlined in Trac ticket #15477, that there is insufficient differentiation between the network admin screens and their site admin equivalents. The issue has been slightly mitigated by Ryan’s addition of the network name in the graduated bar at the top to the right of the WP logo… but I still maintain that the two areas don’t have sufficient differentiation.

      For those who’ve not run the latest alpha version of WP 3.1, the two links below show screenshots. To push my point, I’ve outlined the two main visible signifiers of whether you are in the Network of Site admin area.

      Users in network admin: http://dl.dropbox.com/u/72676/wp-3.1-vis-diff/network-101124-1.png
      Users in site admin: http://dl.dropbox.com/u/72676/wp-3.1-vis-diff/site-101124-1.png

      What was the UX problem we aimed to solve by splitting out the Network Admin area? Does solving it outweigh the issues I’m describing? Do other people agree that there even is an issue in differentiating between the two areas?

      I wish I’d made the UI Chat to talk this over, but unfortunately family business intervened. Apologies.

      Cheers,

      Simon

      • Ryan Boren 7:31 pm on November 30, 2010 Permalink | Log in to Reply

        What’s there now for network and user admin is just v1. It is by no means complete or ideal and we should improve it in 3.2.

        Why a separate network admin?

        One canonical place per network for net admin tasks.
        You get a full admin area for adding menus vs. adding everything under one top-level.
        It allows us to fully separate network-wide and blog-specific tasks and notifications.
        It can be locked down with more restrictive cookies or served from specific servers.

  • JohnONolan 2:17 am on November 23, 2010 Permalink  

    Google Code In Student Information 

    Hello GCI Students,

    You’ve probably reached this post from a GCI Task linking you here, if so – welcome to the WordPress UI Group blog. This is where we work on designing and developing the front-end of the WordPress administrative system.

    We have three main mentors for UI based tasks:

    1. Jane Wells – The UI and UX lead for WordPress.
    2. John O’Nolan (that’s me) – I’m Jane’s deputy and I head up the UI Group.
    3. Sara Cannon – One of the UI Group’s main contributors

    Most of these mentors are available for your questions in the #wordpress-gsoc channel on irc.freenode.net depending on the time of day.

    When we complete WordPress UI based tasks, we have meetings here each week to discuss the work that’s going to be completed. Once the tasks are decided and assigned to different people, mockups are produced which are then reviewed here. After a couple of rounds of revisions (sometimes more), the work is signed off, and we move over to WordPress Trac – which is where the development happens.

    For your GCI tasks which are focused mockups, here are some resources which you can use:

    • We have an early working version of a styleguide for WordPress
    • We have a PSD which contains assets for the main WordPress admin layout (link tbc)
    • We have a PSD which contains assets for the assorted WordPress UI elements (link tbc)

    Also, when creating mockups – here are some very important things to keep in mind.

    • Remember that WordPress is designed to be used by millions of people
    • Everything we design needs to be translated into over 60 different languages
      • These languages include really long words and special charcters (eg. Chinese and Korean)
      • Some of these languages are written from right to left (commonly referred to as RTL)
      • For these reasons all WordPress UI elements need to “work” with double the width, a flexible height, and backwards.
    • Want to know why the WordPress UI is the way it is right now? Read the user testing report which took place for WordPress 2.7, which is what the current UI is based on.
    • Design for a consistent user experience and to be flexible – above all other things.
     

  • JohnONolan 4:11 am on November 17, 2010 Permalink
    Tags:   

    Summary for November 16th 2010 UI Chat 

    Very light meeting, pretty much everyone was away today – so just a quick check in on progress all round. I spent the evening running through UI tickets with Nacin.

    In the mean time – I want to guage interest for UI contributors who want to learn to use trac and do UI patches. If there are a couple of people interested then I’d be happy to do a 1 hour session for designers on how to do all that sort off stuff from the ground up – which could be good for between now and when the core contributor handbook is published.

    Comment below if you think that would be helpful to you.

     

    • Jan-Willem 9:37 pm on November 18, 2010 Permalink | Log in to Reply

      I’d like to get a proper introduction in how I can contribute. So I’ll be all ears. (I don’t mind reading the handbook if a draft version is available)

    • arena 11:05 pm on November 18, 2010 Permalink | Log in to Reply

      What about css cursor ?
      In the post list, try to hover ‘- Draft’ or ‘- Sticky’ or the post date, the cursor is “auto”, like allowing you to insert text … (behavior under FF)
      Could it be possible to set it as “default”

      Btw for abbr the cursor is also “auto”

      abbr {
      cursor:help
      }

    • kim 12:35 am on December 15, 2010 Permalink | Log in to Reply

      I’d like to get involved and learn to use trac and do UI patches. Too late? If not, I’m in and would like to contribute.

      • Jane Wells 1:43 pm on December 19, 2010 Permalink | Log in to Reply

        It’s never too late! The 3.1 cycle is finishing up, but there will be lots of UI work in 3.2 starting at the beginning of 2011. In the meantime, I’d suggest reviewing the draft of the styleguide this group put together, and start learning how to use Trac and SVN to create/submit patches so that when we start back up you’ll be ready to go.

  • JohnONolan 11:53 pm on November 12, 2010 Permalink
    Tags:   

    Summary for November 9th 2010 UI Chat 

    Good meeting, a few notes:

    • We’re ignoring daylight savings, meetings will now be 1 hour later so they stay at the same time each week.
    • TECannon and Chexee collaborating to finish the last bits of the UI group PSDs
    • JohnONolan and Saracannon collaborating to continue CSS refractor efforts
    • Started to discuss a few potential ui group projects for 3.2
     

    • Roland 5:40 pm on November 16, 2010 Permalink | Log in to Reply

      Hi John,

      I cant seem to get on the chat. Did I miss a reschedule? I took off with the assignment to give my take on the Screen Options UI. I wasnt sure what to do but I gave it a shot. You can see the files at https://public.me.com/rolandvparidon username: wordpressui

      You can contact me on @rolandvparidon or here offcourse :)

      • JohnONolan 4:13 am on November 17, 2010 Permalink | Log in to Reply

        Hey Roland, sorry you couldn’t make it to the meeting – have had a look through your work and you’ve made a great start so far. I think the main thing we need to look at (to start with) is consistency. Are we using checkboxes appropriately? Radio buttons? Should fields with numbers be dropdowns instead? Should links be converted to checkboxes or radio buttons? Are we missing relevant headings from certain pages?

        Look forward to hearing your thought on those areas next week!

  • JohnONolan 8:20 pm on October 12, 2010 Permalink
    Tags:   

    Summary for October 12th 2010 UI Chat 

    Good meeting today, lots covered:

    • More elements added to UI elements PSD (props Chexee) http://cl.ly/fc8538e1ac2e4e55f423 – more elements to come:

      • Notifications
      • Icons (Contact Ben Dunkle)
      • Spinners
    • TECannon progressing with other UI PSD (general structure)
    • Blue admin skin progress (props saracannon) http://cl.ly/8e5d3f892fabd8695bce – revisions to follow:
      • Deep blue borders + arrow icon for active menu state
      • Mockup w/ dark grey text + arrow icon for active menu state
      • Revised screen options tabs + fav menu
    • Update from JohnONolan (that’s me) on CSS refactor progress (preview: http://cl.ly/2n1C)
      • Only restructure for 3.1 – no code changes
      • Probably only wp-admin.dev.css for 3.1 – this is a big job, so needs a phased approach
    • Tabs, few issues with current approach and proposed alternative discussed – mockups welcome for next week
    • General WP UI plans discussed for future releases
     

  • JohnONolan 11:42 pm on October 11, 2010 Permalink
    Tags:   

    Summary for October 5th 2010 UI Chat 

    Short meeting today, everyone pretty much carrying on with the points from last week.

     

  • JohnONolan 10:03 pm on September 28, 2010 Permalink
    Tags:   

    Summary for September 28th 2010 UI Chat 

    Big meeting today:

    • Anyone who is having trouble commenting on this blog, either log out of .org or contact myself or nacin to add you as a subscriber to that blog.
    • Reviewed blue admin skin UI mockups (props saracannon) – going forward with the lighter version and developing further
    • Gastonfig + Elfin progressing with accessible skin, main focus on larger hit areas, now waiting on CSS refactor
    • Trac/SVN overview from nacin, beginning documentation here: http://test.andrewnacin.com/trac-svn/
    • Tabs Experiment needs a new iteration – open to all contributors for mockups by next week
    • UI Group Repo Population (woot!)
      • TECannon to tackle main admin layout PSD
      • Chexee to tackle PSD of UI elements (buttons/forms/etc)
    • JohnONolan to get on with CSS refactor and catch up because he is being slow
     

← Older posts

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