Continuing improving the UI

[jsimplicio]

@maxogden hey max, been thinking of alternate ways to lay out the main header. I figured putting the back arrow next to the quit button to the right looks all right, but how about something more like what phone apps look like: That way we have a clear spot for returning arrows, the app name, and quit.

Let me know how you feel about this!

[max-mapper]

+1, reminds me of "Title bar with link buttons and icons" on http://goratchet.com/components/ (or more generally of phone UX which you already pointed out), which is a good thing.

[jsimplicio]

@maxogden Alright so here's the latest

[NickColley]

@jsimplicio looking niice, to make it more clear would it make sense to give the back button the label 'back'?

[jsimplicio]

@nickcolley Do you feel like an arrow pointing back isn't enough? Or doesn't describe 'back' enough?

[jsimplicio]

Here we are

[max-mapper]

Looks super good!

On Wed, Dec 23, 2015 at 9:36 AM, Julia notifications@github.com wrote:

Here we are [image: screencat-6] https://cloud.githubusercontent.com/assets/7318958/11981552/59314e96-a969-11e5-91f3-0ad6059045d6.png [image: screencat-7] https://cloud.githubusercontent.com/assets/7318958/11981551/59307926-a969-11e5-972f-400369d76443.png [image: screencat-8] https://cloud.githubusercontent.com/assets/7318958/11981553/5931c7d6-a969-11e5-9487-3c0313089d5b.png

— Reply to this email directly or view it on GitHub https://github.com/maxogden/screencat/pull/47#issuecomment-166951638.

[NickColley]

@jsimplicio better to include text as an icon can be ambiguous even if it seems obvious http://uxmyths.com/post/715009009/myth-icons-enhance-usability

It's looking great though!

[jsimplicio]

@nickcolley I think you don't always need a label. Some icons do work well. Like, I know everyone tends to hate on the hamburger icon for menus, for example, but by now that thing is most likely recognized everywhere.

I thought that back arrow was doing a fine job on its own, but you've pointed out something very valid :+1:

[jsimplicio]

@nickcolley :smile:

[jsimplicio]

@maxogden I tried making the main-header fixed but it somehow breaks the screens a little bit, it adds scroll bars to small screens that don't need them. I think it has to do with the margin I applied to the top of the body to push the content down since I gave position: fixed to the header. Not sure what to do, but want to avoid scrolling on these smaller height screens:

[max-mapper]

hmm I suck at fixed header CSS actually. if i get a chance i'll try and mess with it

[jsimplicio]

@maxogden Ended up figuring it out. Gave a padding-top to a new class main-content I gave to <main>. Works out fine!

[jsimplicio]

I think my latest does a pretty decent job at choosing screens although I was wondering if a row of two screens per row instead of one is best? Some people may have thousands of stuff open and not sure how to best provide a better searchable list? I was thinking a pretty big rectangular pop up with all the screens would be best? Not sure how that's even feasible or if it even is. I don't mind the scrolling through screens thing but I'm just one user and I built it this way so I am biased :) @maxogden @nickcolley thoughts?

[NickColley]

@jsimplicio that looks great, I think you could try a grid layout for the screens so they always fill as much space as possible, but that's a lot more complicated than what you have so maybe just get this in as is and review later?