Re: [pgadmin-hackers] [Design update] Style guide for pgAdmin4

[Shirley Wang]

On Wed, May 31, 2017 at 11:55 AM Dave Page  wrote:

> On Wed, May 31, 2017 at 2:27 PM, Shirley Wang  wrote:
>
>>
>>> When you say "icon" here, are you talking about the combo box arrow, or
>>> icons on the items themselves? The latter are often useful if you have
>>> items of different types in the same list.
>>>
>>> I think we should have the combo box arrow, to show the user they don't
>>> have to type if they don't want to.
>>>
>>
>> I'm talking about the combo box arrow. I think that's fine, but in that
>> case users shouldn't be able type, they should only be able to select from
>> a group of options, like this:
>>
>> [image: options.png]
>> From what I understand, the text field where a user can type in is for
>> searching through options available to them. If we know that people tend to
>> search by typing more than scrolling, we should use the precedent for type
>> ahead dropdowns .
>>
>
> We are using a much older precedent - one used in Windows for 20+ years
> (possibly other OSs too).
>
> Remember that some of these combo boxes contain values that are specific
> to the database object - the user may not know what to start typing, so the
> arrow gives them a hint that they can get a list by clicking - or they can
> type.
>
> The real difference here is that we also include the x to allow the box to
> be cleared, where Windows would add a blank option as the first thing in
> the list typically.
>
>
I see. It feels like we're at a standstill as to which precedent to use and
neither of us is wrong. This might be a good candidate for user testing. We
can see how people are using the x as well as learn more about typing /
selecting an option behavior.

I believe there are some dropdowns in the partition design we can use to
test. If it doesn't make sense there, I'm fine putting this in the back
burner until there is a good workflow to test it.

Re: [pgadmin-hackers] [Design update] Style guide for pgAdmin4

[Dave Page]

On Wed, May 31, 2017 at 2:27 PM, Shirley Wang  wrote:

>
>> When you say "icon" here, are you talking about the combo box arrow, or
>> icons on the items themselves? The latter are often useful if you have
>> items of different types in the same list.
>>
>> I think we should have the combo box arrow, to show the user they don't
>> have to type if they don't want to.
>>
>
> I'm talking about the combo box arrow. I think that's fine, but in that
> case users shouldn't be able type, they should only be able to select from
> a group of options, like this:
>
> [image: options.png]
> From what I understand, the text field where a user can type in is for
> searching through options available to them. If we know that people tend to
> search by typing more than scrolling, we should use the precedent for type
> ahead dropdowns .
>

We are using a much older precedent - one used in Windows for 20+ years
(possibly other OSs too).

Remember that some of these combo boxes contain values that are specific to
the database object - the user may not know what to start typing, so the
arrow gives them a hint that they can get a list by clicking - or they can
type.

The real difference here is that we also include the x to allow the box to
be cleared, where Windows would add a blank option as the first thing in
the list typically.


>
> If people don't typically type to search or there are usually only a few
> options, it can just be a dropdown.
>



-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

Re: [pgadmin-hackers] [Design update] Style guide for pgAdmin4

[Dave Page]

Hi

On Thu, May 18, 2017 at 6:57 PM, Shirley Wang  wrote:

> Hello!
>
> *Update on style guide location*
> We're going to move the agreed upon styles from Figma onto a webpage that
> will be accessible by everyone. We've decided to have a static site, with
> the html and css available to copy and paste. We'll add components to the
> style guide after we update the current UI with new styles.
>
> *Dropdown styles*
> I noticed that some drop downs include a 'x' next to the current option in
> the text field:
>
> The 'x' and the down arrow functionally do the same thing, and it seems
> redundant to have both. I would suggest removing the 'x' since selecting
> another option from the dropdown will automatically replace the current
> option.
>

No they don't. The x clears the current selection, and opens the combo. The
arrow will just open the combo. Both operations are valid (and in some
cases, required), but for clarity we probably should change it such that
the x doesn't open the combo.



>
> *Button toggles vs checkboxes*
> In some cases within dialogs, a toggle is used to define yes or no, while
> in other cases a radio button is used to define yes or no:
>
> It does seem like 'Connect now?'  and 'Save password' (in 'Connection' tab
> within 'Create - Server') are the only places where checkboxes are used, is
> there a reason why these are different? I think we should just choose one,
> unless there was a specific reason as to why both check boxes and toggles
> are used.
>

I think it was just because that was one of the very first dialogues
written, when we were in POC mode. It should be fixed.

Thanks!

-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

Re: [pgadmin-hackers] [Design update] Style guide for pgAdmin4

[Ashesh Vashi]

On Wed, Apr 26, 2017 at 9:56 PM, Dave Page  wrote:

>
>
> On Wed, Apr 26, 2017 at 4:45 PM, Shirley Wang  wrote:
>
>>
>>
>> I think the addition of icons and some copy would help:
>> [image: Screen Shot 2017-04-26 at 11.28.41 AM.png]
>>
>
> Agreed.
>
+1

--

Thanks & Regards,

Ashesh Vashi
EnterpriseDB INDIA: Enterprise PostgreSQL Company



*http://www.linkedin.com/in/asheshvashi*


>
> --
> Dave Page
> Blog: http://pgsnake.blogspot.com
> Twitter: @pgsnake
>
> EnterpriseDB UK: http://www.enterprisedb.com
> The Enterprise PostgreSQL Company
>

Re: [pgadmin-hackers] [Design update] Style guide for pgAdmin4

[Dave Page]

On Wed, Apr 26, 2017 at 4:45 PM, Shirley Wang  wrote:

>
>
> I think the addition of icons and some copy would help:
> [image: Screen Shot 2017-04-26 at 11.28.41 AM.png]
>

Agreed.

-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

Re: [pgadmin-hackers] [Design update] Style guide for pgAdmin4

[Dave Page]

Hi!

On Tue, Apr 25, 2017 at 9:33 PM, Shirley Wang  wrote:

> Hello!
>
> *Update on alerts*
> Here are mockups of error and update alert styles, as modeled by
> bootstrap.
>
> Success messages appear
> - after running a query
> - adding a database (database connected)
>
> Error messages appear
> - after running query
> - missing info in dialogs
>
> Let me know if I'm missing any areas that have different styling.
>
>
> *Running a query*
> *[image: success-query.png]*
> [image: error-query.png]
> I've added rounded corners - it doesn't seem like there are any other
> areas where sharp corners are used so I think these should be round.
>

Nice!


>
> *Dialog messages*
>
> *[image: database-error.png]*
>
> *[image: connectserver-error.png]*
>
> A note about 'connect to server' message. Currently the error appears
> above where you enter a password. I think all messages should live at the
> bottom of the dialog, above the buttons.
>

Agreed. I like the change - though I prefer the version in Figma (below):

[image: Inline image 1]

I think it looks more attractive, and is more obviously a "transient
element" (for want of a better term) - i.e. something that will go away
again. I think we also need to style the error highlighting on the actual
field to use the same shades of red.


>
>
>
> *Update on tools*
> I played around with Lucidcharts and it seems like the only units
> available for drawing out shapes are inches or centimeters, neither of
> which is particularly useful for specifying sizes of buttons, menus etc.
>
> I found Figma, which is a fairly feature robust web app, similar to Sketch
> and designed for collaboration (it's also free!). Other pros:
> - saved asset library for projects (perfect for mocking up future pgAdmin
> screens w/o the need to recreate assets)
> - version control
> - link for public access
> - generates some CSS from the image
>
> Here's the link to the project. https://www.figma.com/file/
> UjGekp34w6iBizjlGu2D4ccp/4.21pgAdmin-styles-Page-1
>
> Let me know what you think.
>

I'll have a play with it. Initial thoughts (after literally 5 minutes) are
that it seems like it could be very useful. I particularly like the asset
library.

Thanks!

-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

Re: [pgadmin-hackers] [Design update] Style guide for pgAdmin4

[Dave Page]

On Tue, Apr 25, 2017 at 2:47 PM, Shirley Wang  wrote:

>
>>
>> I recommend documenting the green for switches (#5cb85c), which would
>> change notifiers from this:
>>
>> [image: Notifiers.png]
>>
>> to this:
>> [image: Screen Shot 2017-04-20 at 5.28.55 PM.png]
>>
>
>
> Wouldn't it be better if it matched the (possibly-recoloured-by-us)
> Bootstrap alert-success class? I agree that it's silly having two closely
> matched colours, but I think it makes more sense to have the alerts and
> notifiers match, than to match the switches.
>
>
> Do you mean this?
> [image: Screen Shot 2017-04-25 at 9.46.03 AM.png]
>
> If so, ok! If there's no good reason to keep the same colors, we should
> switch.
>

Yes, that one - and the related ones, where there are meaningful matches.
FYI, here are the docs for both:

http://getbootstrap.com/components/#alerts
http://alertifyjs.com/notifier.html

-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

Re: [pgadmin-hackers] [Design update] Style guide for pgAdmin4

[Dave Page]

Hi

On Thu, Apr 20, 2017 at 7:39 PM, Shirley Wang  wrote:

> Hi!
>
> On Thu, Apr 20, 2017 at 4:18 AM Dave Page  wrote:
>
>> Hi
>>
>> On Tue, Apr 18, 2017 at 5:11 PM, Shirley Wang  wrote:
>>
>>> Hello Hackers,
>>>
>>> We've started to work on creating a style guide for pgAdmin4.
>>>
>>> Our goals with the style guide are to:
>>> - have a single source of truth for visual design and workflows
>>> - make it easier when adding or updating a section to the app to
>>> maintain consistency
>>>
>>
>> :-)
>>
>>
>>>
>>> How we'll know we're successful:
>>> - conversations about design are more high level, driven by user needs
>>> and pains
>>> - decreasing (or at least not adding to) current css bloat due to
>>> templating and overwrites
>>>
>>
>> Sounds good.
>>
>>
>>>
>>> Process for creating a style guide
>>> We're going to start from the smallest building blocks of the site and
>>> use that to define larger and larger components. Currently, we're taking
>>> inventory of current styles in the app, including colors, typography,
>>> buttons, dialogs etc.
>>>
>>> Given how the front end is currently structured, we were thinking that
>>> static documentation of styles would be a good MVP, at least until we
>>> determine what the best documentation for developers on the community would
>>> be. Attached is the inventory of styles as of now, including a Sketch file
>>> (a tool for creating design mockups, also where I've been keeping track of
>>> styles). You can also access files here on Google drive here:
>>> https://drive.google.com/drive/folders/0B7jMyxF3NH5lb2JxREUxclp1Unc?
>>> usp=sharing
>>>
>>
>> Also sounds good.
>>
>>
>>>
>>> Please feel free to edit the Sketch file- my only ask is new versions
>>> hare named accordingly.
>>>
>>
>> Is this the app you used? https://www.sketchapp.com/
>>
>
> Yes. Also, I recognize it's probably not the best tool, given that there's
> a 30 day free trial and then you need to purchase a license. I'm looking
> into other programs that are free.
>

FYI, we use LucidCharts internally. It's a pretty good Google Apps
integrated version of Microsoft Visio.


>
>
>
>> Some initial thoughts on the inventory:
>>
>> - Wow, that's a lot of colours. I didn't realise we had so many. I think
>> we need to work that down to a set of a dozen or less primary colours.
>>
>
> Me neither! I'm not so concerned with the number of different colors, but
> with the number of similar shades of each color.
>
> I can distill those down and send another email shortly.
>
>
>>
>>
> - I wouldn't worry about the button colour borders and gradients too much.
>> Those are standard bootstrap colours, so we should document them in terms
>> of bootstrap styles, not colour components.
>>
>
> Ok. But are they appropriate for this app?
>

Personally I think they're fine.


>
>
>> - We should change the browser list font and standardise on Helvetica
>> Neue.
>>
>
> Ok
>
>> - Is Helvetica Neue the best font for us? Our previous designer wanted to
>> use Droid Sans, which I wasn't so keen on, but is there a better option to
>> standardise on?
>>
>
> By standardize, do you mean only Helvetica throughout the app? I like
> Helvetica because it's a very readable typeface, but I'm not sure it's
> appropriate as the only typeface to use throughout the app.
>

Maybe, maybe not - what I do believe though is that the treeview doesn't
warrant an exception.


>
> The only other place I've noticed that uses a different typeface, ignoring
> query editor panel, is the data output panel (uses Verdana). I feel like in
> this case though, a distinction is useful since output data is different
> from body copy.
>

That's a good point.


>
>
>
>>
>> Oh, and an ironic side note: the one style that we have had for 20 years
>> now is the formatting/capitalisation of the "pgAdmin" name. You might want
>> to stop using pg_Admin :-p
>>
>>
> Ha ok will do
>
>
> Your other questions, copied and pasted here:
>
> - Should icons have a dividing line between them? I think so.
> I agree too. Makes it clear what the click area is. Or do you mean when
> there's a light blue shading and there should be a light blue line between
> icons?
>

With or without the shading, I think the light vertical line between those
buttons in the grid adds useful definition. They don't have a border like
the other various buttons, so it helps frame them (and I don't think they
should have a true border, as that would use too much space).


>
> - What determines the light blue shading of a row? I believe it should
> always be the one with focus (assuming there is one with focus)
> Yes, the one that's in focus.
>
>
>



-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

Re: [pgadmin-hackers] [Design update] Style guide for pgAdmin4

[Shirley Wang]

Hi!

On Thu, Apr 20, 2017 at 4:18 AM Dave Page  wrote:

> Hi
>
> On Tue, Apr 18, 2017 at 5:11 PM, Shirley Wang  wrote:
>
>> Hello Hackers,
>>
>> We've started to work on creating a style guide for pgAdmin4.
>>
>> Our goals with the style guide are to:
>> - have a single source of truth for visual design and workflows
>> - make it easier when adding or updating a section to the app to maintain
>> consistency
>>
>
> :-)
>
>
>>
>> How we'll know we're successful:
>> - conversations about design are more high level, driven by user needs
>> and pains
>> - decreasing (or at least not adding to) current css bloat due to
>> templating and overwrites
>>
>
> Sounds good.
>
>
>>
>> Process for creating a style guide
>> We're going to start from the smallest building blocks of the site and
>> use that to define larger and larger components. Currently, we're taking
>> inventory of current styles in the app, including colors, typography,
>> buttons, dialogs etc.
>>
>> Given how the front end is currently structured, we were thinking that
>> static documentation of styles would be a good MVP, at least until we
>> determine what the best documentation for developers on the community would
>> be. Attached is the inventory of styles as of now, including a Sketch file
>> (a tool for creating design mockups, also where I've been keeping track of
>> styles). You can also access files here on Google drive here:
>> https://drive.google.com/drive/folders/0B7jMyxF3NH5lb2JxREUxclp1Unc?usp=sharing
>>
>
> Also sounds good.
>
>
>>
>> Please feel free to edit the Sketch file- my only ask is new versions
>> hare named accordingly.
>>
>
> Is this the app you used? https://www.sketchapp.com/
>

Yes. Also, I recognize it's probably not the best tool, given that there's
a 30 day free trial and then you need to purchase a license. I'm looking
into other programs that are free.


> Some initial thoughts on the inventory:
>
> - Wow, that's a lot of colours. I didn't realise we had so many. I think
> we need to work that down to a set of a dozen or less primary colours.
>

Me neither! I'm not so concerned with the number of different colors, but
with the number of similar shades of each color.

I can distill those down and send another email shortly.


>
>
- I wouldn't worry about the button colour borders and gradients too much.
> Those are standard bootstrap colours, so we should document them in terms
> of bootstrap styles, not colour components.
>

Ok. But are they appropriate for this app?


> - We should change the browser list font and standardise on Helvetica Neue.
>

Ok

> - Is Helvetica Neue the best font for us? Our previous designer wanted to
> use Droid Sans, which I wasn't so keen on, but is there a better option to
> standardise on?
>

By standardize, do you mean only Helvetica throughout the app? I like
Helvetica because it's a very readable typeface, but I'm not sure it's
appropriate as the only typeface to use throughout the app.

The only other place I've noticed that uses a different typeface, ignoring
query editor panel, is the data output panel (uses Verdana). I feel like in
this case though, a distinction is useful since output data is different
from body copy.



>
> Oh, and an ironic side note: the one style that we have had for 20 years
> now is the formatting/capitalisation of the "pgAdmin" name. You might want
> to stop using pg_Admin :-p
>
>
Ha ok will do


Your other questions, copied and pasted here:

- Should icons have a dividing line between them? I think so.
I agree too. Makes it clear what the click area is. Or do you mean when
there's a light blue shading and there should be a light blue line between
icons?

- What determines the light blue shading of a row? I believe it should
always be the one with focus (assuming there is one with focus)
Yes, the one that's in focus.

Re: [pgadmin-hackers] [Design update] Style guide for pgAdmin4

[Dave Page]

Hi

On Tue, Apr 18, 2017 at 5:11 PM, Shirley Wang  wrote:

> Hello Hackers,
>
> We've started to work on creating a style guide for pgAdmin4.
>
> Our goals with the style guide are to:
> - have a single source of truth for visual design and workflows
> - make it easier when adding or updating a section to the app to maintain
> consistency
>

:-)


>
> How we'll know we're successful:
> - conversations about design are more high level, driven by user needs and
> pains
> - decreasing (or at least not adding to) current css bloat due to
> templating and overwrites
>

Sounds good.


>
> Process for creating a style guide
> We're going to start from the smallest building blocks of the site and use
> that to define larger and larger components. Currently, we're taking
> inventory of current styles in the app, including colors, typography,
> buttons, dialogs etc.
>
> Given how the front end is currently structured, we were thinking that
> static documentation of styles would be a good MVP, at least until we
> determine what the best documentation for developers on the community would
> be. Attached is the inventory of styles as of now, including a Sketch file
> (a tool for creating design mockups, also where I've been keeping track of
> styles). You can also access files here on Google drive here:
> https://drive.google.com/drive/folders/0B7jMyxF3NH5lb2
> JxREUxclp1Unc?usp=sharing
>

Also sounds good.


>
> Please feel free to edit the Sketch file- my only ask is new versions hare
> named accordingly.
>

Is this the app you used? https://www.sketchapp.com/

Some initial thoughts on the inventory:

- Wow, that's a lot of colours. I didn't realise we had so many. I think we
need to work that down to a set of a dozen or less primary colours.

- I wouldn't worry about the button colour borders and gradients too much.
Those are standard bootstrap colours, so we should document them in terms
of bootstrap styles, not colour components.

- We should change the browser list font and standardise on Helvetica Neue.

- Is Helvetica Neue the best font for us? Our previous designer wanted to
use Droid Sans, which I wasn't so keen on, but is there a better option to
standardise on?

Oh, and an ironic side note: the one style that we have had for 20 years
now is the formatting/capitalisation of the "pgAdmin" name. You might want
to stop using pg_Admin :-p

-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company