Basic UI Design?: Placement, Appearance, Function
-
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.
-
It all depends on the stupidity intelligence of your anticipated audience. ;) Just look at the difference between Republican and Democratic websites. Marc
Latest Article - Create a Dockerized Python Fiddle Web App Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
Just for the hell of it, I opened the DNC's and RNC's official websites. I'll keep my personal judgemental comments to myself - it's not about them competing for me. It's about, really, both pandering to those already committed. For that reason, I will concur with your comment!
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010
-
[^] 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
One Norwegian webshop ("Arngren") is known by thousands of people due to their outright awful web design. I'd guess that half of the visitors to the site go there just to laugh at the look of it. And it isn't new: In the old, pre-Internet days, Arngren was a classical mail order shop with product catalogs that were similarly awful; they just ported the same look to the Internet.
-
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?
-
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.
-
In addition to what Foothill said, think about workflow. Make the app cater around that, as a whole. Quite literally, the user's interaction with the app should flow like a river in a cohesive design. If you have them jumping all over the place it'll be harder to use. Also, read up on UX designs and remember, less is more. For a business app that people use every day, don't add the extra flashy stuff. It gets old after the novelty wears off. If it's something that's meant to be seen only once or twice then by add means add the flashy stuff however.
Jeremy Falcon
An addendum: Respect the domain specific, professional terminology. Nothing is as annoying as an application where the developer has no clue about how term are used, but try to guess, or use some sort of dictionary lookup, missing a lot of the usage traditions. For non-English UIs you have the additional problem that the developer / translator believes that the target language uses the same terms as in English, or a word very close. In some cases, this may be terribly wrong. Have a professional from the application domain look over you UI with special attention to terminology. This applies even to English UIs.
-
Every single mediocre in a big company creates "guide" how he sees the UI. Lots of 'em. But UI is a very specific to application, so you cannot give "universal advice - every case should be considered.
Agreed. But that doesn't mean that every application is free to do it whichever way the developer chooses: In many professional areas, there are established ways for how to do things across a number of competing alternatives. Sort of like a "GUI professional terminology" - if you want to change that terminology you should be fully aware of that and do it with a clear intent. My honest opinion is that one major reason why *nix failed on the desktop was that developers more or less completely ignored conventions and terminology, and made things the way the programmer thought would be some great idea, without ever asking professionals for their opinion (or if he did, ignoring their answers). Advanced users didn't feel at home; the application didn't "think" the way they did as professionals. So, take the freedom to listen to domain experts. Don't take the freedom not listening to domain experts.
-
Dear Moderators, Can you consider making this the answer to EVERY question? ROTFLMAO... My new favorite answer. BTW, V has later responses indicating EXACTLY my concerns. For which Device, Which OS, Which Development language. How do we know they are not working on a Word Macro? At one point, some GURU was talking web design said: "People need to think in 4D... That websites should change on EVERY VISIT. And present new and different information in new and different ways constantly" I wanted to find this guy and lynch him... But someone beat me to it (The Market Crash of 1999).
-
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?
Just like building a building... Form follows function. Lets say a user has to enter 12 pieces of data. That data comes to them from 3 sources. I would think that grouping the inputs according to source MIGHT make sense. I do not believe there is a one size fits all answer. Look at PowerPoint, Excel, and Word. Similar GUI interfaces, and radically different GUI Interfaces at the same time. Put a formula in a table in word. you can do it. Much hard than a formula in a cell in Excel. Here are some things to consider: 1) What the users want 2) Who the users are 3) Why does the software exist (Hint: to make someones life easier/better=>It's about people) 4) Is it clear what is expected 5) More people are Color Blind than you realize (like myself) 6) How often is it used? (a nice click sound is great on confirmation. But not on confirmation of something that I have to do 1,000 times a day, every day. Imagine a Whoot Whoot sound played on a McDonalds screen after every order is entered. Then imagine a busy lunch with 4 registers going at once) 7) Use it yourself, LIKE your user would 8) use it half way, walk away, come back (like you got interrupted), and figure out how to complete it. Finally, it is as much art as science. And it also depends on the Platform, and the device. Many things work fine on a PC screen, suck on a mobile screen, impossible on a DOS screen, horrible on a paper terminal (for those of us who have been through all of them).
-
Agreed. But that doesn't mean that every application is free to do it whichever way the developer chooses: In many professional areas, there are established ways for how to do things across a number of competing alternatives. Sort of like a "GUI professional terminology" - if you want to change that terminology you should be fully aware of that and do it with a clear intent. My honest opinion is that one major reason why *nix failed on the desktop was that developers more or less completely ignored conventions and terminology, and made things the way the programmer thought would be some great idea, without ever asking professionals for their opinion (or if he did, ignoring their answers). Advanced users didn't feel at home; the application didn't "think" the way they did as professionals. So, take the freedom to listen to domain experts. Don't take the freedom not listening to domain experts.
-
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?
I haven't read all of the replies, so please forgive me if I'm repeating others. My one overarching general principle is, "maintain the context". There is nothing worse than being in the middle of a process and forgetting why you're there and what choices you've made. So, for left-to-right I keep the highlighted context queues on the left and the detail on the right. For right-to-left, the context is on the right. For top-to-bottom, the context is on the top. That kind of eye-flow, that parallels the natural way people read, helps keep the experience intuitive and minimizes user stress. Oh yeah! In my experience it doesn't happen very often these days, but use contrasting colors for text and background. There is nothing more aggravating than being unable read text that blends into the background like yellow on line green for example. Good luck to you!
Cheers, Mike Fidler "I intend to live forever - so far, so good." Steven Wright "I almost had a psychic girlfriend but she left me before we met." Also Steven Wright "I'm addicted to placebos. I could quit, but it wouldn't matter." Steven Wright yet again.
-
I-net is full of such "UI guides", I don't know what a problem topic starter has. :) But looking at his questions (where to place controls) he is not even googled it.
Maybe he was asking for wisdom. Not just google matches. If you do not distinguish between wisdom and google hits, then you are like that capitalist who knows the price of everything and the value of nothing. When I ask for advice from a person, I am asking for that person's experience, knowledge, judgements and wisdom. Not for his google hits.
-
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?
[User Interface Principles (Windows)](https://msdn.microsoft.com/en-us/library/windows/desktop/ff728831(v=vs.85).aspx)
"(I) am amazed to see myself here rather than there ... now rather than then". ― Blaise Pascal
-
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)
I tend to believe that if you cannot post something helpful, remain silent. Flippant comments are of no assistance to anyone.
-
Maybe he was asking for wisdom. Not just google matches. If you do not distinguish between wisdom and google hits, then you are like that capitalist who knows the price of everything and the value of nothing. When I ask for advice from a person, I am asking for that person's experience, knowledge, judgements and wisdom. Not for his google hits.