Interface Design and UX Thread - How our App Looks

[EricB]

I have a couple of questions if you don't mind....

1. Is there a particular font that is best suited for use on screen from a graphics perspective? I know that Calibri and Cambria are supposed to be good for documents, but what fonts/sizes would be best from a graphics perspective (I sure hope this is not one of those questions that everyone has a different idea of what is best and there is no consensus)?

2. What screen resolution and dpi settings do most graphics folks use? Is it the standard 96dpi at 1920x1080 or something different?

3. For a tool like this, do you want something small and compact that uses the least amount of screen real-estate or something larger, or does it matter?

Thanks,

Eric

[StevenWWinters]

Here are a couple of mockups using slight variations of the excellent artwork and concepts from several of the posts here.

Frank's (very nice) cube logo could also be easily integrated with this design.

[pauland]

About those designs.

The user is given the option to turn an option ON or OFF, but is presented with a tick to indicate the default value.

I think the default value should also be presented in exactly the same terms - ON or OFF, not a mix.

It seems to me that there is a conflict with using ON and OFF and having a logo that displays an X as a tick ( ie you want to use ON and OFF to represent choices, yet want the logo representation to show another form of choice).

Another observation. Recently I worked on quite a large project adding an alternative language to an iPad application. The original intention had been to load new language strings for localisation. The app was very sensitive aesthetically to layout and in the end I had to manually edit all of the text with the alternative.

I can confirm that when compared to English, italian may be beautiful to hear, but it requires (generally) more text to say the same message as in English, so it was a pain to have to re-layout the text and sometimes re-size it.

In an app with multiple language support, the layout may be difficult to preserve between languages and ON and OFF may not be quite so small, etc..

[Gare]

There are definite drawbacks to using bitmap images as controls, the biggest being that when the application is resized, the bitmap may become "fuzzy" and hard to read.

Eric

Hi Eric and welcome to the discussion.

I for one am against compromising a good UI design just because the programmers have opted for a default library of common controls to avoid using bitmaps.

The bitmap parts of the UI don't have to scale, they can remain at the size they were written to, or (and I'm professing ignorance here) many icons for desktop applications have multiple resolution images bound into one *.ico file. And what Windows usually does with this is if you have a 48 x 48 space defined, the appropriate icon within the wrapper is called. and 32 x 32, and 256 x 256 and so on.

So perhaps the controls need to be written to bitmap at various sizes.

I believe we need creative solutions to avoid interface ugliness. True Confession: I'm a designer and I work most comfortable with a program that has a pleasant, and occasionally inspiring interface. I stopped using Painter for about two revs because Corel Corporation destroyed the lovely, and intuitive UI the original three programmer/artists had created.

A lot of the chat on the "Dear Xara" thread and others are about how we either love or detest the "Dark UI".

Fit and finish is an important topic and I'm happy that we have this area to discuss the pros and cons of the fit and finish.

By Best,

Gary

[StevenWWinters]

In an app with multiple language support, the layout may be difficult to preserve between languages and ON and OFF may not be quite so small, etc..

Agree. This is a concern and something to be considered...

[gracehjs]

I really like your second one. especially the tabs and the idea of pictures in the help. I can see what Paul means about on/off vs a tick. As for internationalization, having the text following the on/off box etc. gives you more flexibility, and I think the WPF gives us scalability..
All you designers seems to lean towards dark colours. Is this the vogue? I suppose skinning can solve that.

Here are a couple of mockups using slight variations of the excellent artwork and concepts from several of the posts here.

Frank's (very nice) cube logo could also be easily integrated with this design.

[Barbara B]

I don't understand, what the check mark in the default column means.

1. Does it mean that the toggle or the value that is currently set to the left is set at the default, shipping value?
2. Or that there is a default setting but we are not saying what it is?
3. Or that we want to return the setting to the default?
4. And if I want to change the default value do I need to somehow need to unlock or uncheck the default check mark in the default column?

I'm assuming it means the first and that it will auto adjust (become unchecked) if I change the value, but I think this has to be made clear.

Also is there a way to return a value to the default instead of trying to figure out or remember that it was 14?

[Gare]

@Steve,

There are two things I'd like to mention from an art and a usability thing, three, actually:

The example you posted is indeed dark. In fact, it's too dark. And changing colors to present a different theme is a matter of a few degrees. Example? Xara DP's "Dark UI" would be much more legible is they lightened the dark grey only 5%.

Also, I really wish we'd "give it up" with visual allusions to a brush tool; the double-entende of the checkmark integrating into the "x" is now gone with that brush drawing sprouting out of the upper right "leg". Xara is a drawing program, it will always primarily be a drawing program without some major recoding, so if we use an art implement at all, it'd be a pen or a pencil, no?

The sliders and buttons are over-rendered in the example above. You don't need gradients on a toggle that's supposed to look like metal for people to get the idea that it's a toggle switch. It over-complicates the art, it's a visual distraction, we've all been working toward K.I.S.S. for weeks now!

You make an overall UI look hodge-podge when one element is rendered perfectly down to a screen pixel while other areas are flat.

I like the UI, Steve, in its general presentation and organization, but when web nerds talk about "fit and finish", they're talking about getting stuff right down to the last pixel, and there are still some medium to small embellishments I disagree with as an artist.

And I really appreciate all the feedback, creative ideas, and spirit of sharing as we progress, so if there's any negativity in this post, please attribute it to a lousy breakfast or not winning the lottery or something, okay?

My Best,

Gary

[StevenWWinters]

I don't understand, what the check mark in the default column means.

Good question. The answer is #1. It is simply an indicator that the setting displayed is the default for a fresh install of Xara. No check mark means that the registry setting has been modified from the default. There may be other or better ways to communicate this, so as always, suggestions are welcome.

The four buttons in the upper right would provide these functions:

Single check mark: Set the selected setting to default.
Four check marks: Set all settings to default.
Single undo arrow: Undo the changes to the selected setting.
Four undo arrows: Undo all changes for the active session.

Whether these will get implemented is yet to be decided. They are merely options that made sense to me.

Also, note that the circle with arrow at the bottom (2nd mockup) is meant to be a button that will expand to display the registry path for the selected setting, for those interested in such things. See 1st mockup to see the registry path being displayed.

Other comments:

It doesn't follow for me that the check mark logo requires that at checkbox be used for yes/no or on/off type settings. The logo is simply meant to relate that the program allows setting changes, of which there are several types, not just those that can be represented by a check mark. A checkbox could be used, but it isn't essential. Also, I think that there needs to be a distinction between how an on/off setting is toggled and the default values are reset.

Regarding color: As has been commented already, color preferences tend to be very subjective. Not sure what to do about that other than to have as many ideas put forth as people are willing to contribute. These two mockups are built around the grey of the logo used and variations of the Asus router colors I posted earlier. If anyone wants to play with different color combinations using the same layout, I can post the .xar file. There are several named colors that could be easily adjusted. The buttons are live copies which allow for quick changes as well.

Also, I've noticed huge differences as I've viewed the same image on different monitors. On one monitor it can look fine while on another it appears much darker with poorer contrast. Not sure what the answer is there but those better versed in proper color combinations probably do.

Another challenge of the attempting a graphically rich design, is that screen real estate can quickly become an issue. Hence the scroll bar in these two mockups. In the same vein, the concern about localization is valid.

Hope this helps...

[Barbara B]

As to EricB's question:

1. Is there a particular font that is best suited for use on screen from a graphics perspective? I know that Calibri and Cambria are supposed to be good for documents, but what fonts/sizes would be best from a graphics perspective (I sure hope this is not one of those questions that everyone has a different idea of what is best and there is no consensus)?

Calibri and Cambria are Windows fonts from at least Win7 and on. But they do belong to MS.

As an open source project, I suggest that we use an open source font.

Here are a few that look good to me. All are free on Google Fonts and work with Xara. I think we want to pick a font with a lot of styles so we can coordinate the interface with the apps download site and other collateral. Right now Open Sans would be my pick because it is a large family with a condensed variants which can come in handy.


Lato 10 styles (no narrow or condensed version)Łukasz Dziedzic

SIL Open Font License, 1.1

Source Sans Pro 12 Styles (no condensed)

Paul D. Hunt

SIL Open Font License, 1.1
Source® Sans Pro, Adobe's first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.

Open Sans 10 styles
Open Sans

Steve Matteson

Apache License, version 2.0Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.

Open Sans Condensed 3 styles
Open Sans Condensed

Steve Matteson

Apache License, version 2.0Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.