Thoughts on this sort of UI styling?

[apankrat]

Hi guys,

I am in the process of designing a UI for a Windows app, and the stylistic/visual side of it is proving to be quite a task. Unlike 5-10 years ago, the spectrum of employed design choices is now pretty wide. Native UIs are still here, but they are being supplemented by better looking UIs like those of Chrome, Firefox, Evernote, Acronis and others. There are also UIs that go for full customization and resemble more a web app than a Windows program, e.g. Kaspersky and iTunes.

What I'm trying to do is to find the balance between sprucing app the UI and still retaining the native look and feel. I have sketched out few options, and I'd like to get an opinion on one of them.



Does these customizations come across (even in a slightest way) as annoying or inappropriate? I'll take all opinions... i.e. not just from the UI purists :)

Thanks

[Jibz]

I am pretty far from being an UI specialist, but I am always happy to offer my oppinion .

I think it has a slight bit of the "mac" feel to it, but you have added just enough black to the icons to not make it too bland. I still wonder if perhaps a touch of pale coloring on the icons might work, just like the blue in the heading works?

I assume you did not make the texture on the border of the window, but for this particular one, I find the edge where the glassy shadow on the border starts (slightly below the edge of the second box of text) to be rather distracting. When I first opened the post and glanced at the screenshot, I thought it was one window at the top that cut of the top bit of another window below it.

And, nitpicking, I feel there is perhaps slightly too much space above and below the final paragraph of text at the bottom.

[Renegade]

I won't comment on the aesthetics, but only on the layout and messaging. (There are better designers here than me.)

You could do a bit better job on the text as some is a bit longer than it needs to be. The layout is excellent, but you're not taking full advantage of it.

At the top, your last line should be more like:

...tasks correctly.

What it does:
OR
It can:

That sets things up. You could even do that in a smaller blue font than in the title. Use whatever short language works best, e.g. "It tests:" or whatever.

The 4 grouped areas have a lot of impact, and work like bullets - very nice. The black/gray text is a nice touch, but make the black text shorter. e.g.

Elevate to admin privileges.
Run as a service.
Run as a desktop application.
etc.

Just examples there. Shorter is easier to read, punchier, and people will make fewer mistakes. (Most people don't/can't read.)

Using the active voice was the right choice. Keep that.

Check what you mean by "switch", as it implies that the program can do that on the fly, which I would not expect.

The bottom text is confusing. I'm not sure what's going on there, but then again, I don't know what the application is supposed to do, so I could be off-base.

I like the bottom buttons. They are clear. The chevron also helps indicate forward motion.

Overall, I think it's pretty good. The linear layout leads eventually to action at the bottom, which is what you want. I think you've done a good job there.

It's hard to program and do design and do writing and do... You eventually get distracted by one aspect, and neglect another. Been there more than once. Have the mistakes to prove it~!

Just my $0.02.

[Stoic Joker]

I like it as is. None of the UI dress ups detract from it's concisely stated purpose...which allows me to glance at it, like it, and properly understand its purpose in one shot.

[tomos]

looks nice 

The 4 grouped areas have a lot of impact, and work like bullets - very nice. The black/gray text is a nice touch, but make the black text shorter. e.g.

Elevate to admin privileges.
Run as a service.
Run as a desktop application.
etc.

I'm not sure if this is exactly what Renegade meant, but I think it would be better to swap the black and grey text -
i.e. the first point would be:

Run as administrator
Elevate itself to full admin priviliges
or at least, as Ren says, make the black text shorter.
The grey is imo better for more info in case someone doesnt understand the brief & to-the-point black text.

[apankrat]

Thank you, gentlemen.

Jibz, the window frame came with Windows. Unfortunately there's not much I can do about it without going overboard with customizations (and I'd rather not do that).

Renegade, aesthetics are as important, spit it out :) Agree on all other points, thanks.

tomos, agreed on line swap, already implemented.

[mouser]

Personally I tend to favor very traditional windows gui interfaces, but I think that screenshot looks absolutely great.
Having the 4 steps so clearly delineated, each one with a short title and then some explanatory text.

I think it's really great.

My only warning with such approaches is that what works great with a few choices can become completely unusable as options grow -- that's where the non-traditional user interfaces always seem to bite back.

[apankrat]

Thanks, boss :)

I just can't bring myself to use unmodified UI controls. My eyes bleed, and I don't like that. Unfortunately all this designy stuff comes at the extra expense of real estate that is consumed by the whitespace, padding, margins, etc. What I'm trying to do here is to flesh out and evaluate the visuals and overall styling. This is the hard part. Reducing margins is a piece of cake.

[tomos]

Do show us an update at some stage!

[f0dder]

I kinda like the layout and the icons, but NONE OF THOSE TEXTURED BACKGROUNDS, PLEASE! They're horrid, the kind of garish stuff you'd expect from Apple... and they lower the compression rate of screenshots. Keep it simple & clean.

[MilesAhead]

Thanks, boss

I just can't bring myself to use unmodified UI controls. My eyes bleed, and I don't like that. Unfortunately all this designy stuff comes at the extra expense of real estate that is consumed by the whitespace, padding, margins, etc. What I'm trying to do here is to flesh out and evaluate the visuals and overall styling. This is the hard part. Reducing margins is a piece of cake.

I'm just curious. Is the dialog created using UI stuff available on Vista and later? Or does the same code work on XP? I've seen some tutorials about the new dialog styles available on Vista and W7 but I didn't really study 'em. You know like those panels that say "such and such an app has stopped working" that are different than the old XP style.

[cranioscopical]

When I first opened the post and glanced at the screenshot, I thought it was one window at the top that cut of the top bit of another window below it.

I shared that first reaction, finding it quite distracting.

[Paul Keith]

Not a designer but the design in an earlier era would have fitted in a traditional good but now it's all about speed/ergonomics creating the allure for the design. (although I'm inclined to agree with fodder)

In this case, a couple of nitpicks that irk me:

All gray Even if they show color on hover or is just one button beneath, it isn't clear what's the primary 1st priority of this program. I.E. in prolonged usage, you're forcing me to remember the text position rather than just hit an icon-ish button or a quick test menu.

Self-serving text I'm often at fault for verbosity but I definitely don't want to read it in directly on the software choices. I don't care how basic it is or how complex it is. That's what help files are for. Just bring me to the task. If it's really complicated, use the design to give a red label or warning subtitle: not recommended for 1st time users/advanced users. Anything. Just get me off reading this menu and let me start clicking something.

Small text Yes big text tends to make the window unnecessarily big and ruin the native feel of an application but I'm sick of these smaller texts in software pretending to be more office suite when really they have the option level of a browser's native nav bar. Even some Linux gui has improved on this slightly.

Lack of stats If it's a test, I would like to know how many times I've tested a certain option. If numbers are too complicated for insufficient reward, I would still like an rss reader type of "hint" where I have already tried a previous choice already. When even this is too complicated, I would like some clearer traffic signs. Yes, these are test icons but instead of 1/2/3/4 for example why not learn from browsers and use the back arrow for going back. The back arrow with a lock for switch to limited user and place them on the left side where the numbers used to be? This may be a bad designer choice but I hate the trend of going for symmetry over practicality. Designers have had ages to fix the remote control problem of PCs and they still put format over clarity except for Tablet apps that have shinier interfaces but then they mess up the ease of clicking a button.

Redundancy Instead of a quit button where the x button was oh so conveniently given the red color already, why not some option to remind me to rerun the test after X days or some other option like checkbox/drop down box like "run for every day of the week" or "default option" when nothing is selected and you click run some tests. It sounds like a feature suggestion but I believe in a post-gamification fad era/current tablet era, the button text menu is gone. Everything should at the basic level be written from the perspective of off/on -> start. Yes, "ok, let's run some tests is comforting" but only for the first time. It's a minor nitpick from a coding standpoint but for design, I believe something like this is the equivalent of quick scan/advanced scan for AV programs. It just confuses the customer. It just confuses the person trying to teach another person. It makes you hesitate to run tests but the program does not have any useful labels like before you start the car, do you have your seatbelts on. It's just redundancy over redundancy. Hit the play button already!

Bad Billboards If the window frame/border can't be changed, then the content inside should change. For coding, I believe this is overthinking it. For design, ignoring it, is the equivalent of ignoring where the entrance of a door comes out. You don't make the main entrance in front of a smelly alley for example. Ok, so the frame's providing an optical illusion...even with ugly design use that optical illusion for something important. Don't put the one text you can't click as the largest header-ish spot that the reader has to read. It would be like opening a document and being told that you are opening the document right now. No one cares. It was one of the main reasons why people got infected with ActiveX in the early days of IE. Get that thing away from that spot. Even in the current design, Elevate would have sent a better optical illusion. It's like when some software asks Start game and then later down, start in window mode. It doesn't matter what that lower option says. It can say start in fullscreen mode but because it's in the right spot even the most savvy coder who knows everything about the different fullscreen/windowed mode problems plaguing most software would instinctly have a sense that made the "start in windowed/fullscreen" is not intended by the designer to be the main form of starting the game even when it's a basic option that every average software user is familiar wtih already. It's all about instinct just like keyboard shortcuts. Yes there's no muscle memory but at least give users eye expectations so that they can move on and think less of the app.

[allen]

I like it as is. None of the UI dress ups detract from it's concisely stated purpose...which allows me to glance at it, like it, and properly understand its purpose in one shot.

What he said. I think it looks really nice.

[MilesAhead]

Other than the drop shadow, it seems it's back to flat. Are we heading into another "flat" cycle?

Perhapns the sub text in the "buttons" are only for demo, but it reminds me of the type of help where you have an edit input line with the label Email Address and you press F1 to be told "enter your email address."  It doesn't look horrible, but I don't see the advantage to flat, bland and redundant unless the rest of the interface, such as desktop is all going to be flat. In which case, turn off the drop shadow.

I prefer a bit more color to give the eye something to do other than differentiate shades of gray. Not circus colors... but something.

If the IRS had a push button panel it might look like this one.
Top line would be "Pay your Taxes" and the sub text would be
"this is where you pay your taxes."

[Jibz]

Ok, if you will forgive my very basic skills with Gimp, here is a quick edit of your dialog to see what it would feel like:

[attachimg=#]

The changes I made are

• Added a hint of color to the icons to make the dialog seem less bland
• Removed the texturing on the background to make it feel more clean
• Removed some vertical space -- the original was quite tall
• Gathered the list items in one text box together with the text at the top, since they are not actual button choices

[wraith808]

^ I *do* like that version better...  Although I liked the texturing, and would add that back.

[40hz]

I very much like the look of either. The first is certainly more "modern" looking, but the flat version works equally well. (I personally much prefer to see flat screen elements. No good reason for it really. I just prefer them.)

I would suggest, however, that since each of the choices is mutually exclusive, radio buttons be used? Thats what they were designed for. They restrict the selection to a single choice and make it explicitly clear which selection is either the default or is currently active,

The icons to the right of the text don't always make it obvious that they are buttons - mostly because so many other apps put so much useless 'bling' up on the screen that you're never completely sure what's clickable and what's not.

Not to say that you'd need to adopt the ugly and dated looking "black dot in a circle" standard radio button, (Although there's a lot to be said for it since it is a standard interface element most people are familiar with by now.) You could have the background color behind the selection change when you hover over it or something similar to provide a visual clue it was an active element. (Note: if you went this route, the first mock-up would look better since you already have borders around the text. So it should be relatively easy to use a hover effect with that design.)

Just my

[Jibz]

I would suggest, however, that since each of the choices is mutually exclusive, radio buttons be used? Thats what they were designed for. They restrict the selection to a single choice and make it explicitly clear which selection is either the default or is currently active,

It sounds like you did the same thing I did at first -- assume it was four buttons giving you a choice, like you see in some of the Vista+ dialogs. But I think it is actually just a static list of things that will be tested when you click the OK button, which was why I put them together in one textbox instead.

I could be wrong of course, maybe they are buttons?

[40hz]

^Precisely!  

I wasn't sure either. (Which might indicate there's a design problem.)

But if it is a list of tests about to be run, something along the lines of the following might be clearer?

This will test each of the following four settings below to ensure correct operation:

..test
..test
..test
..test

Do you wish to run these tests now?"

<Yes - run these tests now. |  No. Just go back to previous screen>

[Stoic Joker]

Likely these tests are all interrelated and therefore must be run in a group. The top states that is is going to verify several tasks. Then it lists them, and inquires if the user would like to run these tests. Consistent use of plurals makes it rather clear (to me) what's about to happen.

[f0dder]

^ I *do* like that version better...  Although I liked the texturing, and would add that back.

But... why? What's with you texture people? Get off my desktop :p

It sounds like you did the same thing I did at first -- assume it was four buttons giving you a choice, like you see in some of the Vista+ dialogs. But I think it is actually just a static list of things that will be tested when you click the OK button, which was why I put them together in one textbox instead.

I made that assumption as well - since there's the "let's run some tests" button, I think you're right, and in that case the steps should definitely be in a continuous list, like in your mockup.

[apankrat]

Paul, thanks for a thoughtful comment, but I'm afraid you got off a wrong assumption. This is not a program that is meant for repetitive use, it's a single-run disposable. It will go to the people on the mailing list, so it's probably OK to assume that whoever downloads and runs it would also have some interest to read through the explanatory text. With regards to the redundancy - I see your point, but I disagree. I am all for minimalism in the UI (see, for example, here), but this is not a place to overdo it.

Jibz, very good iteration, thanks. I ran this screenshot by /r/software (here) and the window being very tall was the #1 remark. I also have to concur that it looks rather nice without the texture. I had the texture put in first, and then added all other decorations. Never occurred to me to try and take it away.

40hz, Stoic Joker, f0dder - no, not buttons... but I suspect you suspect that already :)

--

In any case, I was looking to check if this sort of customization level is OK with everyone, and it looks like it is. So I got my answer.

Also, having slept on it, I am now reworking this particular proggy from being a "Test" into a "Demo". With this I can trim some text and simplify the layout.

[apankrat]

Alright, what about this sort of approach? Less decoration, more layout, more contrast and a bit more texture.

[f0dder]

Apart from the texture, I think it's pretty fine

Perhaps a way to get some information on which tests are going to run, before pressing the button?