Basic UI Design?: Placement, Appearance, Function
-
When I build a UI, there's a couple of fundamentals I use to guide where to put things.
- Order of importance
- Most humans start at the top so the most important data and used functions go there
- Infrequently used elements are put at the bottom
- Match the culture reading direction: some read left to right, right to left, or top to bottom. Controls should match natural text progression.
- Group controls
- If a group of controls displays and manipulates data for a single class of object (or any data), keep them close together.
- Too much data to fit on a single display? Combat this with drill-down functionality such as tabs, popups**, or dialogs**.
- Lead the eyes
- Use borders and colors to naturally lead the eyes to important parts of the UI.
- The use of darker backgrounds with progressively lighter backgrounds around your functional groups.
- Use colored backgrounds to clearly demarcate UI parts the have different functions.
And above all, get constant feedback by those who use it during all stages of development; listen to them and incorporate their ideas into the design (if possible ;P ). ** Don't use actual popups and dialogs that exist over the top of your app/page. Most users see them as disruptive and annoying. I find the most positive feedback from pseudo-popups that slide/fade in, obscuring your content, in the top visual layer in the app/page.
if (Object.DividedByZero == true) { Universe.Implode(); } Meus ratio ex fortis machina. Simplicitatis de formae ac munus. -Foothill, 2016
Woah, a useful post... what gives? :confused:
Jeremy Falcon
- Order of importance
-
Woah, a useful post... what gives? :confused:
Jeremy Falcon
-
It's Tuesday and I was avoiding actual work :laugh:
if (Object.DividedByZero == true) { Universe.Implode(); } Meus ratio ex fortis machina. Simplicitatis de formae ac munus. -Foothill, 2016
Oh snap.
Jeremy Falcon
-
Perhaps you should try reading it before you comment. The UX Guide does not only document some good ideas, it explains the reasoning. Does not mean that the Office-team adheres to it, as some dimwits NEED a new UI to accept it as a "new" product. I support Microsoft in both decisions.
Lopatir wrote:
case in point: compare the UX of apple to Microsoft past and present: ... which one looks better?
UX design has nothing to do with "looking better". And yes, the market has decided with their wallets - the fruit was never to be taken serious.
Bastard Programmer from Hell :suss: If you can't read my code, try converting it here[^][](X-Clacks-Overhead: GNU Terry Pratchett)
Skimmed it some time ago, lot of typical boiler plate basic info but really nothing you wouldn't get from the idiots guide (in way less words.) Their portfolio is out there for all to see, and when it comes to UX it [no pun] 'aint pretty! Better to ask somebody that demonstrates actual ability rather then paraphrase the obvious. Beauty queens, six year old kids and clowns all know how to put on make up. Which would you ask for advice on making yourself look good?
Sin tack the any key okay
-
was wondering is there was some kind of Basic ui design principle that someone might have written a blog that follows the line of Placement: where is control/component placed Appearance: how does component look. Font, size, color, word wrapping, ect... Function: what does component do. One thing, multiple things depending on situation. maybe something with different words?
The most basic UI design principle is this: Consider your audience. Too many developers approach UI from the direction of "I have to support this set of operations on that set of data", and they design their UI accordingly. While that approach may satisfy requirements, it probably won't satisfy your users. You need to put yourself in your user's viewpoint. Imagine yourself doing their job using your application. What should the application do to make that job easier? What operations do they always need? What operations are optional? Is there a required or natural order to those operations? What is the vocabulary employed by the user? In some cases you need to consider the user's level of education, training, and so on. If you are localizing your application, you need to account for language translation issues. Text wrapping, hyphenation, and other layout concerns can be problematic. One key notion is to meet your user's expectations - don't surprise them, and certainly don't frustrate them.
Software Zen:
delete this; -
was wondering is there was some kind of Basic ui design principle that someone might have written a blog that follows the line of Placement: where is control/component placed Appearance: how does component look. Font, size, color, word wrapping, ect... Function: what does component do. One thing, multiple things depending on situation. maybe something with different words?
We had it all figured out with windows, menu, toolbars, tooltips, right-clicks, color, etc. Now for some reason it's more desirable to have black and white UIs with functionality that is barely discoverable, all in the name of accommodating touch screens. IMNSHO, the "simplification" process apps are currently going through is not an "improvement".
-
Eddy Vluggen wrote:
here is a (free) ux guide from Microsoft, sporting over 600 pages worth of information.
ummm, didn't microsoft give us metro (or whatever they're calling it today ... but maybe not tomorrow). Didn't they give us the new Windows 10 looks - plural because not consistent. jokes aside: that free guide from Microsoft, don't waste you're bloody time, 600 pages of shit. Microsoft have some pretty good software but they've never lead in design, never. case in point: compare the UX of apple to Microsoft past and present: ... which one looks better? ... no, make that which one has always looked better.
Sin tack the any key okay
-
Skimmed it some time ago, lot of typical boiler plate basic info but really nothing you wouldn't get from the idiots guide (in way less words.) Their portfolio is out there for all to see, and when it comes to UX it [no pun] 'aint pretty! Better to ask somebody that demonstrates actual ability rather then paraphrase the obvious. Beauty queens, six year old kids and clowns all know how to put on make up. Which would you ask for advice on making yourself look good?
Sin tack the any key okay
Like I said, try reading it :)
Lopatir wrote:
Beauty queens, six year old kids and clowns all know how to put on make up. Which would you ask for advice on making yourself look good?
UX design is not about "looking good". That is exactly what went wrong - people who assumed they knew better and who imagined they could create something "cooler" looking. UX design is about discoverability, usability; it is the difference between the old DOS 5.x manual and the manual that came with Windows 95 (hint: none). Terms like "pretty" are not applicable in UX design; and from a developer I would not accept a marketing-like approach :|
Bastard Programmer from Hell :suss: If you can't read my code, try converting it here[^][](X-Clacks-Overhead: GNU Terry Pratchett)
-
When I build a UI, there's a couple of fundamentals I use to guide where to put things.
- Order of importance
- Most humans start at the top so the most important data and used functions go there
- Infrequently used elements are put at the bottom
- Match the culture reading direction: some read left to right, right to left, or top to bottom. Controls should match natural text progression.
- Group controls
- If a group of controls displays and manipulates data for a single class of object (or any data), keep them close together.
- Too much data to fit on a single display? Combat this with drill-down functionality such as tabs, popups**, or dialogs**.
- Lead the eyes
- Use borders and colors to naturally lead the eyes to important parts of the UI.
- The use of darker backgrounds with progressively lighter backgrounds around your functional groups.
- Use colored backgrounds to clearly demarcate UI parts the have different functions.
And above all, get constant feedback by those who use it during all stages of development; listen to them and incorporate their ideas into the design (if possible ;P ). ** Don't use actual popups and dialogs that exist over the top of your app/page. Most users see them as disruptive and annoying. I find the most positive feedback from pseudo-popups that slide/fade in, obscuring your content, in the top visual layer in the app/page.
if (Object.DividedByZero == true) { Universe.Implode(); } Meus ratio ex fortis machina. Simplicitatis de formae ac munus. -Foothill, 2016
- Order of importance
-
was wondering is there was some kind of Basic ui design principle that someone might have written a blog that follows the line of Placement: where is control/component placed Appearance: how does component look. Font, size, color, word wrapping, ect... Function: what does component do. One thing, multiple things depending on situation. maybe something with different words?
[^] that should do it. :wtf:
Arguing with a woman is like reading the Software License Agreement. In the end, you ignore everything and click "I agree". Anonymous
-
[^] that should do it. :wtf:
Arguing with a woman is like reading the Software License Agreement. In the end, you ignore everything and click "I agree". Anonymous
-
was wondering is there was some kind of Basic ui design principle that someone might have written a blog that follows the line of Placement: where is control/component placed Appearance: how does component look. Font, size, color, word wrapping, ect... Function: what does component do. One thing, multiple things depending on situation. maybe something with different words?
Excellent topic. This is the kind of stuff that makes the internet worth having in the home.
-
When I build a UI, there's a couple of fundamentals I use to guide where to put things.
- Order of importance
- Most humans start at the top so the most important data and used functions go there
- Infrequently used elements are put at the bottom
- Match the culture reading direction: some read left to right, right to left, or top to bottom. Controls should match natural text progression.
- Group controls
- If a group of controls displays and manipulates data for a single class of object (or any data), keep them close together.
- Too much data to fit on a single display? Combat this with drill-down functionality such as tabs, popups**, or dialogs**.
- Lead the eyes
- Use borders and colors to naturally lead the eyes to important parts of the UI.
- The use of darker backgrounds with progressively lighter backgrounds around your functional groups.
- Use colored backgrounds to clearly demarcate UI parts the have different functions.
And above all, get constant feedback by those who use it during all stages of development; listen to them and incorporate their ideas into the design (if possible ;P ). ** Don't use actual popups and dialogs that exist over the top of your app/page. Most users see them as disruptive and annoying. I find the most positive feedback from pseudo-popups that slide/fade in, obscuring your content, in the top visual layer in the app/page.
if (Object.DividedByZero == true) { Universe.Implode(); } Meus ratio ex fortis machina. Simplicitatis de formae ac munus. -Foothill, 2016
Foothill wrote:
Lead the eyes
My sole opinion: That is The pillar of good UI design.
- Order of importance
-
was wondering is there was some kind of Basic ui design principle that someone might have written a blog that follows the line of Placement: where is control/component placed Appearance: how does component look. Font, size, color, word wrapping, ect... Function: what does component do. One thing, multiple things depending on situation. maybe something with different words?
There is something very close to that in Human Computer Interaction (academic field of usability). This article will give you a quick explanation: Visibility, Affordance & Feedback - The Quixotic Engineer[^]
-
Someone once said that a captialist is a man who knows the price of everything and the value of nothing. I see a parallell in those "good helpers" whose only contribution is to state "Why don't you just f* google it?" Well, of course! Maybe, a few years from now, those "good helpers" will understand that "just f* google it" is a "been there, done that". A google hit list in itself is just data, it is not information. (There's the parallel to price vs. value!) The asker of course knows that he will get gazillions of "answers" from google, but which of those are good answers? Which are non-info? Which are garbage? Frequently, when I ask for advice and suspect that some wiseguy will reply with a "Why don't you just...", I add to the question: "I have googled it, using the search terms x1, x2, x3 and x4, but that didn't bring up anything of value. I need more specific references!" - yet, some wiseguys believe that I ask for two dozen new keywords: "You could google for y1, y2, y3... y31" - and quite obviously, the good helper never googled those terms himself before providing them to others as a "solution" to the problem. It does happen that someone provides good and valuable search terms, or specific links/references, but that requires that I am very explicit in my wording to keep those non-wisdom wiseguys from drowning me with non-information that they don't understand a bit of themselves. All they known is to pick a sequence of possibly (but maybe vaguely) related terms an prefix them with "Why don't you google ...". Yes, I frequently get frustrated by non-helping good helpers. So I am airing frustration here. I look forward to the day when "Just google it!" is no longer classified as "helping to solve the problem".
-
Someone once said that a captialist is a man who knows the price of everything and the value of nothing. I see a parallell in those "good helpers" whose only contribution is to state "Why don't you just f* google it?" Well, of course! Maybe, a few years from now, those "good helpers" will understand that "just f* google it" is a "been there, done that". A google hit list in itself is just data, it is not information. (There's the parallel to price vs. value!) The asker of course knows that he will get gazillions of "answers" from google, but which of those are good answers? Which are non-info? Which are garbage? Frequently, when I ask for advice and suspect that some wiseguy will reply with a "Why don't you just...", I add to the question: "I have googled it, using the search terms x1, x2, x3 and x4, but that didn't bring up anything of value. I need more specific references!" - yet, some wiseguys believe that I ask for two dozen new keywords: "You could google for y1, y2, y3... y31" - and quite obviously, the good helper never googled those terms himself before providing them to others as a "solution" to the problem. It does happen that someone provides good and valuable search terms, or specific links/references, but that requires that I am very explicit in my wording to keep those non-wisdom wiseguys from drowning me with non-information that they don't understand a bit of themselves. All they known is to pick a sequence of possibly (but maybe vaguely) related terms an prefix them with "Why don't you google ...". Yes, I frequently get frustrated by non-helping good helpers. So I am airing frustration here. I look forward to the day when "Just google it!" is no longer classified as "helping to solve the problem".
I disagree. I always (try to) present good (specific)answers on good (specific) questions. He never stated he googled and found answer x or y. He never stated what he figured out for himself. He never stated what technology, what OS, what platform (desktop vs web) he was targeting. I have nothing against the guy (or girl), but if you ask a general question you will get a general answer.
V.
(MQOTD rules and previous solutions)
-
There is something very close to that in Human Computer Interaction (academic field of usability). This article will give you a quick explanation: Visibility, Affordance & Feedback - The Quixotic Engineer[^]
-
A good start would be the UX design guides for the platform you are developing for. Apple: [Apple Human Interface Guidelines](https://developer.apple.com/design/) Windows [Design basics for Desktop applications (Windows)](https://msdn.microsoft.com/en-us/library/windows/desktop/dn742446(v=vs.85).aspx) Android: [User Interface Guidelines | Android Developers](https://developer.android.com/guide/practices/ui\_guidelines/index.html) Follow the design guidelines and build your application. After that, you need to do some usability test of your design with real persons.
I'd rather be phishing!
Then, whatever you do: Expect your UI design to be really bad, five years from now :-). I started out with the "Common User Access" specification in the 1980s (published by IBM but developed as a joint effort between IBM, MS and a few other companies). Windows 3 changed a number of the rules, Windows 9x even more, Win7 changed a number of things again, and then came the tile-based Win8, and ... Often, you must make a decision: You are quite certain that some new UI hype (like mouse gestures a few years back) is a fad that won't last, but today everybody demands support for it. You must choose between the modern (but maybe less functional) look, or a more conservative, tried out design that might look slightly outdated. What comes out of this is that if possible, you should pick up design guidelines from several UI generations, and pay attention to rules we do not push in the modern designs. Why where they forgotten? Maybe they should have been kept! Obviously, guidelines provided with justifications / rationale are worth their weight in gold. And if no justification / rationale is given, try to make it up, and ask yourself if you can defend it. I know of a number of rules that I cannot defend; they are just rules that someone stated. Unless someone in power demands that I honor the rule, I feel free to ignore the rule.
-
When I build a UI, there's a couple of fundamentals I use to guide where to put things.
- Order of importance
- Most humans start at the top so the most important data and used functions go there
- Infrequently used elements are put at the bottom
- Match the culture reading direction: some read left to right, right to left, or top to bottom. Controls should match natural text progression.
- Group controls
- If a group of controls displays and manipulates data for a single class of object (or any data), keep them close together.
- Too much data to fit on a single display? Combat this with drill-down functionality such as tabs, popups**, or dialogs**.
- Lead the eyes
- Use borders and colors to naturally lead the eyes to important parts of the UI.
- The use of darker backgrounds with progressively lighter backgrounds around your functional groups.
- Use colored backgrounds to clearly demarcate UI parts the have different functions.
And above all, get constant feedback by those who use it during all stages of development; listen to them and incorporate their ideas into the design (if possible ;P ). ** Don't use actual popups and dialogs that exist over the top of your app/page. Most users see them as disruptive and annoying. I find the most positive feedback from pseudo-popups that slide/fade in, obscuring your content, in the top visual layer in the app/page.
if (Object.DividedByZero == true) { Universe.Implode(); } Meus ratio ex fortis machina. Simplicitatis de formae ac munus. -Foothill, 2016
Other good rules: Default action should never be destructive. (You wouldn't believe how may times I was swearing out loud when switching from an editor asking at exit "You have unsaved files. Do you want to save them?" to one who asked "You have unsaved files. Do you really want to exit without save?" Default: Yes, in both editors!) Normal termination is at the end of the page - lower right corner (in a left-to-right culture). The lower right is NOT the place for e.g. a "Cancel" button! This rule was firmly established in early Windows UI, but nowadays you may see the "OK" or "Done" button more or less anywhere, and the lower right button may be anything. Avoid, as far as possible, switching between keyboard / mouse / ... So, provide keyboard shortcuts and a thoroughly planned tab key navigation sequence. (And set intial focus to the field the user will fill in first.) Make use of the mouse keys, menus and other graphic controls so that you can do "everything" with the mouse until text input is required. Make sure that your UI can handle zooming. This is especially important if you aim at a user group including persons above 30 years of age. Make at least a minimum of "Universal Access" adaptations. E.g. smear some grease on a pair of glasses and see if you can still read the screen (there is a popular trend in hairline fonts that is very hard to read with smeared glasses). Do not require super-precise mouse navigation. Be aware of differerent kinds of color blindness.
- Order of importance
-
I disagree. I always (try to) present good (specific)answers on good (specific) questions. He never stated he googled and found answer x or y. He never stated what he figured out for himself. He never stated what technology, what OS, what platform (desktop vs web) he was targeting. I have nothing against the guy (or girl), but if you ask a general question you will get a general answer.
V.
(MQOTD rules and previous solutions)
He did state some specifics that he wanted to focus on. And, even though he didn't explicitly state that he had googled some over-generalized terms, anno 2017 you may assume that he actuall has done so. He probably has googled even the more specific terms that he mentions in particular. After all, he must be working from a network connected PC (since he can ask the question at CP). Telling him that we have this great thing called "google" that he might try might have been relevant ten or fifteen years ago, but not today. Today, you should always assume that the asker has tried google first. If you want to refer someone to google, it must be by suggesting some non-obvious and highly specific search terms that you have tried yourself and know that returns valuable information (related to the user's problem) in the first page of hits.