Basic UI Design?: Placement, Appearance, Function
-
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?
-
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?
-
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?
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!
-
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?
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?
My favorite design principals. Keep in mind that someone may have to look at that page/application all day long. Have pity on them: no more content than necessary; larger fonts and pleasant contrast. Get the work-flow from someone who's using it. Locate things, and certainly tab order, to take into account how they think makes sense. Usually, they're right, and even if they're not, they'll feel comfortable. Although I did have to build an application with intense context sensitivity and remapping of component values, ideally, you keep the use of each component to a single purpose. This reduces the learning curve. That doesn't mean, for example, that a picklist's contents can't vary. What it means is that the implications of what you're picking should be obvious and consistent for that particular control. A few well-thought-out tool-tips where essential. If you did the work correctly they'll not be needed. Other opinions vary
"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
-
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?
As already noted, there is a (free) ux guide from Microsoft, sporting over 600 pages worth of information. It is not just guidelines, it contains argumentation on why they do stuff that way. Download it, print it, and learn to dream it - a great way to end those annoying discussions.
Bastard Programmer from Hell :suss: If you can't read my code, try converting it here[^][](X-Clacks-Overhead: GNU Terry Pratchett)
-
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?
{facepalm} Now for a rant as I am getting pissed off with trying to use an email template to look even remotely readable in android-gmail-exchange, which for stupid reasons looks different then using a gmail account in the gmail app. maybe I asked this wrong - I am not after new guidelines, I am interested in if there EXISTS already something that suggest a basic: Where placed - How it looks - What is its function. Some generic or principle instead of specific guidelines for a platform/device/language If I know what I was looking for, I would google it and find something. Hench why maybe something does exist but uses different words, thus am unable to find.
-
That is great! 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
-
{facepalm} Now for a rant as I am getting pissed off with trying to use an email template to look even remotely readable in android-gmail-exchange, which for stupid reasons looks different then using a gmail account in the gmail app. maybe I asked this wrong - I am not after new guidelines, I am interested in if there EXISTS already something that suggest a basic: Where placed - How it looks - What is its function. Some generic or principle instead of specific guidelines for a platform/device/language If I know what I was looking for, I would google it and find something. Hench why maybe something does exist but uses different words, thus am unable to find.
I'd still recommend printing the ux-guide and reading the entire thing. Though it is aiming at the Windows-platform, the ideas are universal. If you see a button, you know you can click it. You also "know" that you cannot edit text in a label, only in a textbox. Those would be rather basic principles, right? :) Gmail is not your app, so you might not have full control on how the mails are rendered.
Bastard Programmer from Hell :suss: If you can't read my code, try converting it here[^][](X-Clacks-Overhead: GNU Terry Pratchett)
-
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?
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
-
I'd still recommend printing the ux-guide and reading the entire thing. Though it is aiming at the Windows-platform, the ideas are universal. If you see a button, you know you can click it. You also "know" that you cannot edit text in a label, only in a textbox. Those would be rather basic principles, right? :) Gmail is not your app, so you might not have full control on how the mails are rendered.
Bastard Programmer from Hell :suss: If you can't read my code, try converting it here[^][](X-Clacks-Overhead: GNU Terry Pratchett)
-
As already noted, there is a (free) ux guide from Microsoft, sporting over 600 pages worth of information. It is not just guidelines, it contains argumentation on why they do stuff that way. Download it, print it, and learn to dream it - a great way to end those annoying discussions.
Bastard Programmer from Hell :suss: If you can't read my code, try converting it here[^][](X-Clacks-Overhead: GNU Terry Pratchett)
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
-
i assume you mean the Design basics for Desktop applications (Windows)[^] posted by Maximilien, yeah some interesting points, thanks
Dunno; looks like it is just a small part of the guide. http://www.glyfx.com/useruploads/files/UXGuide.pdf Sorry, not clickable link as the websites editor goes nuts when pasting a PDF-link.
Bastard Programmer from Hell :suss: If you can't read my code, try converting it here[^][](X-Clacks-Overhead: GNU Terry Pratchett)
-
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
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)
-
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?
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
-
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;