1.0 UI could use a bit of love #129

Closed
tonyarnold opened this Issue Mar 4, 2014 · 10 comments

Comments

Projects
None yet
5 participants

https://twitter.com/tonyarnold/status/440675943552532480

🔥 Dons flame retardant suit, hands one to @orta as well 🔥

Overall, Alcatraz is a huge improvement to installing Xcode plugins, themes and other bits and bobs — it's an essential part of my new machine install :)

That being said, I think the UI of Alcatraz 1.0 could use some improvement. There are a few issues that I've noticed while running the new release these last few days:

  • Icons are blurry and unclear: I've tried on both retina and non-retina displays and the there is some kind of scaling going on here that maybe should't?
    screen shot 2014-03-04 at 1 43 50 pm
  • The size of the icons in the tableview is too small — it's basically the only visible control in each cell, and there's plenty of room to make it bigger
  • The iOS 7 style of the icons looks out of place on OS X Mavericks
  • Having to hover over each cell to see the project link and preview buttons seems counterintuitive — this is subjective, but how do users even know they're there? Accidental discovery isn't a good user experience
  • How do I install an item? I know that clicking on the icon does that now, but only because I gave it a shot. The icons aren't presented as controls — visually they appear to be decoration

Overall, I'd love to see the UI become more explicit — mainly showing the install/remove/update, project link and preview image controls as controls, and not hiding them by default. Perhaps more closely matching the "Capabilities" view in Xcode's project editor would clear things up a bit?

screen shot 2014-03-04 at 1 56 02 pm

I'd be more than happy to help develop whatever shakes out of this conversation.

Contributor

orta commented Mar 4, 2014

So, I think that's some good feedback. 🔥

I welcome it. So here's what I've been thinking since then, attacking the problem 6 months later gives some longer perspective. Recommend clicking through to get the pixel snapping correct.

screen shot 2014-03-03 at 23 46 39

  • I agree on the buttons, ATM installing something is a bit of a mystery meat navigation.
  • I gave myself less constraints and allowed two greys and two blues like apple does. Which means icons can be less outline-y.
  • The icons have all got pixel snapping turned on now in Sketch ;)
  • This gives credit to the author, and provides easy access to the git repo for the README.
Contributor

orta commented Mar 4, 2014

  • Alcatraz doesn't resize cells to the size of content ATM
  • The quick look should ideally centre around alcatraz's window, as opposed to screen
  • Pretty much anything that is clickable should have a hover state of either a lighter blue outline-y version of a darker version of itself.

Great stuff 👍 that is much clearer in every sense of the word!

I'm happy to contribute some code that'll autosize the cells to their content and ensure that the quicklook previews centre themselves against Alcatraz's window.

I bring comments in my wake :trollface:

  1. Can the category icons be larger? I assume they'll scale cleanly because they're in a Sketch document? Ideally we would follow the user's current system sidebar icon size — they're still quite small.
  2. The preview icon feels out of place under the category icon. Is there another more appropriate place to put it that still makes sense?
  3. I'd like you to consider whether the new Aqua light variant controls might be a better fit in this context than iOS 7 style buttons. Ideally, Alcatraz would have a feel of it's own, but still fit in with Xcode's existing UI. This point obviously really subjective, but I'm a big fan of working with the standard OS controls if at all possible. Entirely your call!
Owner

supermarin commented Mar 4, 2014

@tonyarnold thanks for bringing this up.

I'm glad to move forward in a better direction, but had to ship 1.0 to make people aware it's here.
It's not perfect, but works. It'll also get things moving faster. Let's see where this goes

@supermarin no probs! That's why I said it needs love, not that it's bad/wrong (because it's not, 1.0 is great) 😉

Collaborator

kattrali commented Mar 4, 2014

@orta The other configuration windows of Xcode (Preferences, Organizer, other windows that aren't project-specific) have a unified toolbar, so it seems to follow that Alcatraz should as well. We'd want to avoid having the package manager appear to be something that only affects the current workspace.

Contributor

orta commented Mar 4, 2014

@kattrali agreed, I just left it in from my last mockups, I agree on the extended window frame.

Contributor

orta commented Mar 11, 2014

Can the category icons be larger? I assume they'll scale cleanly because they're in a Sketch document? Ideally we would follow the user's current system sidebar icon size — they're still quite small.

This is to keep it consistent with Xcode's main window & the documentation window really, the organiser uses normal toolbar, but that's the odd sheep of the three main window types.

The preview icon feels out of place under the category icon. Is there another more appropriate place to put it that still makes sense?

Agreed, mockup changed below.

I'd like you to consider whether the new Aqua light variant controls might be a better fit in this context than iOS 7 style buttons. Ideally, Alcatraz would have a feel of it's own, but still fit in with Xcode's existing UI. This point obviously really subjective, but I'm a big fan of working with the standard OS controls if at all possible. Entirely your call!

My call is to favour Xcode style over traditional here, IMO it should feel like a "missing" part of Xcode rather than a standalone plugin for the tool.

I moved the screenshot into a live preview, IMO these images could just get cached locally, I don't think they have to deal with being updated too often I bet.

I've negated the need for the footer by showing installation progress via the button, sorry dude, I know its work but this is a pretty elegant design answer to showing Alcatraz activity.

Moved the design to use a large toolbar, then darkened the icons.

screen shot 2014-03-11 at 09 24 28

Sketch file

Haha — don't apologise to me, @orta! I came in here, grinched all over your redesign and then wandered off. I deserve a few challenging controls in retaliation!

I'm not entirely convinced by re-using a button as a progress meter… but it's your baby, I'll make it work 😉

tonyarnold referenced this issue Mar 30, 2014

Closed

[WIP] Update UI to be spiffingly spiffing #154

3 of 6 tasks complete

+1 for solid filled icons, for people with accessibility concerns such as colorblindness the current build is very difficult to discern if a plugin is installed or not.

supermarin closed this Mar 10, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment