Interface Design and UX Thread - How our App Looks

Quote:

---

Originally Posted by Gare

... if there's any negativity in this post...

---

Gare,

Looks like our posts crossed. I haven't sensed any negativity. In fact there are a number of things in the mockups that I'm not happy with, but it's a case of "I know what like when I see it, but that doesn't mean I can create it". As I've said, I'm not a graphic artist. But I do have a sense of what is functional and practical in terms of UI interface. These mockups are merely to help refine what Grace and Eric will have to implement in code, that's all. If they assist with that, I'm happy...

That's why the coders and the artsy people should work together, as we are now.

:)

-g

Gary,
I'm not suggesting using standard ugly stock grey controls, I am also wanting an attractive UI. My comment was thinking about using bitmap images for large parts of the UI. For example using an image to represent a checkbox is agood idea, but using an image of "knob" for a slider can cause issues such as the image getting fuzzy or distorted when the user either enlarges or shrinks the window. A couple of additional concerrns are: an image must be created for each "state" of the actio - using the knob example, an image of the knob with the "pointer" in all available positions must be created (if you ever look carefully at the system tray icon for Task Manager, you will realize that there are only 3 images used to display processer utilization); 2) if the app is localized, and the graphic includes test, then you have to have with the text in each language that is supported.

What I am trying to express is that we can & should use graphic images when & where they truly add value, but we also need to keep in mind the drawbacks, and not use bitmp images in place of controls where they don't add value or are going to cause unnecessary issues.

Eric

using an image of "knob" for a slider can cause issues such as the image getting fuzzy or distorted when the user either enlarges or shrinks the window.using an image of "knob" for a slider can cause issues such as the image getting fuzzy or distorted when the user either enlarges or shrinks the window.

User interfaces don't scale proportionately, so making a window bigger doesn't make the controls bigger, so there's no issue regarding making images fuzzy or distorted.

I think it's clear that getting consensus is going to be interesting. We all know that a camel is a horse designed by a committee!

Quote:

---

Originally Posted by pauland

[B]We all know that a camel is a horse designed by a committee!

---

Hmmm. I'd heard that an elephant was a horse designed by a committee. Given the current state of the US government, the elephant was probably designed by a sub-committee.

@ Eric—Ah, there's the hitch in your last post:

we can & should use graphic images when & where they truly add value

I can't help but be a little leery of what is a subjective observation!

Question for all: what are we "selling†"?

My answer: A utility that helps Xara users work in a more intimate, personalized style, but is basically an existing product, XaReg, now that Steve and John have updated it.

The two things about this product that can make the time spent worthwhile, are:

1. That it's open source, so it can be examined and updated eternally, and

2. It's handsome-looking.

I'm serious. You gotta capitalize on what you have that's unique, and a lot of Xara artists might not care at all about Unique Feature #1.

I do not want Steve, Grace, and other people's investment in this to result in 5 copies being downloaded!

My Best,

Gary

† Substitute the words "offering", "serving up", or "donating" if the idea of "selling" something sounds overly commercial.

@Gary,
You are correct, that is a subjective observation. I apologize for not wording that better (things have been kind of stressful around here this week dealing with the fire and possible evacuation).

Let me try again, and maybe I can explain my thoughts better... I think we definitely want to take advantage of the creativity and artistic abilities that are available to us (and it would be foolish not to), but we also need to keep in mind things like localization, performance, and how the app looks and behaves on systems with different versions of the operating system, displays, etc. While some UI elements can easily be replaced by a graphical image (such as a radio button or checkbox), others are not so easily replaced.

I think that everyone involved needs to know what the both the cost and benefit of anything that is going to have a potential for issues in the future so that it they can determine if the benefit outweighs the cost. For example, if replacing a control with an image is going to take a great deal of code to implement, would cause the UI code to be difficult to maintain or upgrade, or would cause issues with localization, then the community needs to decide if using an image rather than a control is truly something that should be done.

At the same time, as developers, we need the artistic community to use their knowledge and experience to drive the look and feel of the UI. This should truly be a team effort to ensure that the result is not only functional but also easy to use and artistically pleasing. I don't think that there is ever going to by one single design or color scheme that meets everyone's taste, but I would hope that we can get a design that a majority of users could agree on. I have a couple of things relating to the color scheme that I am looking into right now that might help in this area since the color scheme seems to be one of the bigger issues.

Eric

Just a bit of playing with Gary's idea.

I like the embellishments, Rik. I'll bet the general consensus is that it's very handsome looking and might even reproduce at small sizes.

My question would be: is the appearance of the checkmark getting too diminished as the "X" element" becomes m ore dominant?

-g

Quote:

---

Originally Posted by Barbara B

As to EricB's question:
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.

---

I really think we want to stay with one of the fonts that come with Windows rather than installing additional fonts on the users system. My question was more one of which font is more readable on screen (as opposed to paper) and which font is generally more graphically pleasing.

Eric

I am not an artist or graphics person, but I have a suggestion regarding the logo image... try creating it with a transparent background.

That way, no matter what the background color of the form, the graphic will "blend" (maybe the wrong word) with the application rather than appearing to be stuck on to it.

I like Rik's icons, but if they were part of a logo image, how would they appear on a red gradient background (or blue or gray, etc.)? Or, if we took the logo from Steve's UI and stuck it on a form without a black/dark grey UI, how would it blend with the form? The same thing goes if the space in the "a" or "r" in XaRT is white, how will it look on a form with a background that is not white?

This hit me the other day when I saw an app that had a really nice logo and a good UI, but they did not "blend" together, and it appeared like the logo was stuck onto the UI at the last minute. It actually made me think of a printed mockup where someone taped a printed version of the logo where there was a placeholder for it.

Eric