Docs Issue Tracker Mockups

Happy Monday Docs team!

@karmatosed has started plugging away at mockups for your issue tracker and we’re ready for feedback!

First off, here’s a mockup she’s created of the actual tracker itself, which is affectionately codenamed Documentron.

The tracker includes columns for: reported username, date reported, type of issue (we’ll discuss which types are wanted during the implementation phase), current status, a link to the page with the problem, and a button for resolving the issue. It also includes a hide/reveal triangle for seeing the details of a particular issue.

Additionally, here’s a second mockup showing how hover states might work on the tracker.

@karmatosed has also worked on a set of buttons that would be placed on documentation allowing anyone (who’s logged in) to report an issue. Which one do you like most and why? Feel free to discuss the placement of the button as well. We’ll want it somewhere consistent across all docs.

But that’s not all… Once someone clicks to report an issue, where do they go? Assuming they’re logged in, they visit this wonderful form:

Alright Docs team, what do you think about the mockups above? Keep in mind, they’re just mockups right now and might still need some design touch ups. Anything you think of is useful at this stage so we can get the mockups just right prior to sending them to a developer to implement.

Thanks for all your feedback!

#issue-tracker

Drew Jaynes 7:38 pm on November 4, 2013

Looks great so far. Few things:
1. I like the second report button because it fits the best with the existing theme and yet the red highlights makes it stand out. The solid grey/white blends in too well and the solid red stands out like a sore thumb.
2. What other choices would live in the issue type drop-down?
3. There should be some indication of who resolved an issue in the list table, as well as the ability to reopen an issue
- Chris Reynolds 7:41 pm on November 4, 2013
  
  Agree with 3. Also, an indication if someone has claimed a ticket. (and, you know, claiming a ticket at all)
  - Chris Reynolds 7:42 pm on November 4, 2013
    
    …in which case the resolved column and checkbox would be hidden unless you were the person claiming it.
    
    …or maybe I’m overcomplicating things. But that certainly goes along with indicating who resolved the issue…
    - Sam Sidler 8:08 pm on November 4, 2013
      
      On resolution, we could easily just sign the user’s name as having resolved it, but agreed that we need a way to say who’s assigned something.
      
      I don’t think we want to hide the resolved column and checkbox. Just because you’re assigned something doesn’t mean you necessarily should be the only one to resolve it.
- Sam Sidler 8:03 pm on November 4, 2013
  
  As far as other choices, that’s something that the docs team can discuss. It’s entirely changeable and up to you. We can add more later if needed too. As I mentioned in my post, it’s something that can be decided on during the implementation phase, but it can be discussed now or at any time.
- Sam Sidler 8:06 pm on November 4, 2013
  
  Forgot to mention, reopening an issue is on the first mockup at the bottom. 🙂
Chris Reynolds 7:41 pm on November 4, 2013

+like
This would definitely help people (or me, at the very least) get involved in fixing/updating/writing docs.

re: report an issue button — I like the second one with maybe the third as a hover. Agree with @drewapicture above, the first one blends in too much.

I may be putting the cart before the horse, but, out of curiosity, is this going to be coded as something entirely new or is it going to be based on bbPressbbPress Free, open source software built on top of WordPress for easily creating forums on sites. https://bbpress.org./TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/./etc with new stuff added in/styled?
- Sam Sidler 8:05 pm on November 4, 2013
  
  Cart before horse, but talking with the metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. team, we definitely won’t be using tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. and likely not bbPressbbPress Free, open source software built on top of WordPress for easily creating forums on sites. https://bbpress.org.. The plan a month ago was to use P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. with resolved posts and modify it visually. Of course, plans can change. 😉
  - Tony Scott 8:51 pm on November 4, 2013
    
    I may be missing something here (almost certainly!), but if we’re not planning to use TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/., has consideration be given to using GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/?
    - Sam Sidler 8:57 pm on November 4, 2013
      
      Not at all. Nor will we. 🙂
      
      As many have said before me, if we can’t use WordPress for writing and managing content… we’ve failed. 😉
  - Chris Reynolds 8:54 pm on November 4, 2013
    
    So, basically, just a custom loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. displaying all the posts (tickets) and their resolved/unresolved status. Gotcha.
Graham Armfield 10:43 am on November 5, 2013

With regard to the view issues table, I like the format but the colour contrast is a bit lacking. The light blue on white and the light green on white would both fail an accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) review – as would all the faint text in the resolved line.

Please can the dates be less ambiguous – either 12 Dec 2013 or Dec 12 2013 – to cater for international ordering of dates.

Re the ‘Report an issue’ button, I favour the third as it stands out more clearly than the other two.

It may just be the quality of the screenshots but the colour contrast is an issue in the ‘Reporting an issue’ form. The light grey text would fail an accessibility review, the dark grey text is borderline.
- karmatosed 11:16 am on November 5, 2013
  
  Thanks a lot for the review, I certainly do want to make sure that it passes contrast and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) as much as possible. I did contrast check the colours and whilst it may be the processing, I absolutely will double check that. I’ll also note to do some date changes.

Want to get involved?

Weekly meetings

Docs Issue Tracker Mockups

Want to get involved?

Weekly meetings

Share this:

Site resources