Hot answers tagged

32

A good example to consider would be the iBooks app in iOS which allows users to enable the dark theme automatically depending on the light sensor detection. However as PS86 rightly pointed out, don't build this automatically into the system but enable the user to set as a desired parameter. To quote this article, the iBooks app enables this by an option ...


30

Old style figures are used in titles and paragraph text. According to Fonts.com old style is suitable for title and paragraph text due to the fact that this gives the text uniform look. The 'modern' style numbers should be used for tables and graphs, since these modern numbers align better when used in these contexts. There are fonts that support both old ...


28

Keeping the checkbox disabled should be alright, if you are concerned about it you can make use of tooltips to explain the user why it is not selectable when he hovers over the field. Some thoughts about the design: The checkboxes you are using don't let the un-selectable checkbox be understood as their border coincides with the container. Make them ...


18

I like to compare old-style numbers to lowercase, and new-style to capitals. Some typographers even talk about 'lowercase' and 'uppercase numbers'. To my eyes, using UPPERCASE in the middle of a sentence seems odd, also when using numbers in the text. old-style numerals just 'flow' better with the rest of the lowercase letters in a sentence. When available, ...


16

Interesting question! Options #1 for both screens. I think there are a few points here: Consistency. You don't want to cause a sudden flip between the two screens and confuse the users or make them question themselves - 'what's changed? what did I do?' Key-value pair. Think of the Question being your Key and Answer being your value. Regardless of screen ...


9

Break the header into two. Yes, you can change the website header across devices. However, the example shows what looks like a logo on top of a background image. Consider breaking the header into both a raster image (the background) and a vector image (the logo). This will allow the background to scale down to a mobile device while allowing the logo to ...


8

Manual line wrapping stems from the old days when editors were more "line based" and had no WYSIWIG features. You had to take care of formatting the text yourself. This meant manual line endings and adding empty lines to separate paragraphs. With the advent of automatic line wrapping (and better/quicker) hyphenation to support it, life for text editor users ...


8

I'll give you a fine solution and then ill explain Back in time, it was much easier for the users when almost every website used similar colors and designs with interactive forms, because when the users learn it on this website, then they will know it on every other website. However, nowadays designers are enforcing more identity into their designs ...


7

Use a drop-down menu for excessive tabs.


7

The problem The Gestalt principles of grouping and similarity are at play here. The form is crowded. Too little space within and between elements creates a block that your brain tries to digest as one, then it finds the important chunks. Quick and easy fixes Explanation text is too small. Text needs more space below. Fields need more margin between each ...


6

Yes, it's a good idea to dynamically change the theming of the application based on lighting. Also remember to add: the ability for the user to turn off dynamically changing the theme based on lighting The ability to change theme regardless of the current lighting ambience Sometimes users prefer having dark theme during the day and vice versa


6

CSS was designed (unfortunately) to lump layout in with styles. It really doesn't matter whether you focus on layout or colors or fonts first. What is important is to focus on content first. That is the most important distinction: content v. styles. Content drives everything. Content drives layout, and font and colors come in to reinforce everything.


5

Ascenders and descenders of lowercase letters make them easier to differentiate than the blocky shapes of uppercase letters. The same is true when applied to groups of letters as they form words and blocks of text. And is also true when applied to numbers. The string of text you've shared looks especially awkward as it includes a mix of symbols '/', codes '...


5

One advantage of light text on a dark background is that different colours in the text are easier to distinguish. That might not be important to most readers, but one type of user who makes heavy use of different colours of text is the software developer. I suspect there are two reasons why it is easier to differentiate between colours on a dark background:...


5

I have a similar set up for a test environment and a production environment. I found myself accidentally adding test data to the live database. So I wanted to make sure that it was easy to identify which server I was on. I could glance at the address bar, but it was too easy to forget. I wanted the differences to be minimal but obvious. I chose to add a ...


5

If the user only needs to select exactly one row before proceeding, consider replacing the checkbox with a Select button. You could make it so the button is only visible on items which are allowed to be selected.


4

Through research regarding tabs, top placement is best as a top tab can appear as a header to the associated content below. It's also a good rule of thumb to constrain a tab count (usually 5 - 7) that adds a bit of control to user content. If tabs exceed the 5 - 7 limit content editors will continue to create new tabs which can overflow and create clutter. ...


4

There was an earlier question about whether it's ever okay to have multiple rows of tabs. The general consensus was that it breaks the tab metaphor and gets confusing. Accepting that multi-row tabs won't work, you have a couple of options: Use the side tabs. Use tabs across the top when there are only a few of them, but if there are more tabs than fit ...


4

1) You can simply use a different font, one that has all the characters. 2) You could include a fallback font that is somewhat similar to your main font, but includes more glyphs/characters. That way your main text is rendered with the original font and any characters not included in that font, should fallback to the other font. (That's how I assume it to ...


3

Regarding the header image, you can use media queries to switch the images at some breakpoint where it makes sense to do so, to make the best use of the screen space available. For example: .header { background-image: /* mobile-friendly version of image by default */; } @media (screen and min-width: 480px) { /* arbitrary breakpoint for simplicity */ ...


3

Users on general wouldn't know the difference between a javascript-library-enabled partial undisclosure of an element and a refresh of the page. There are no conventions around for letting the user know the difference. And I agree, with todays heavy web apps which takes three four seconds to load, it really would be useful to know the difference. Or not. ...


3

Axure is a wireframing/prototyping tool. It's not a graphic design/UI design tool. Obviously, you can push its limit to some extent, but creating shadows is not something it does out of the box and I'd strongly recommend not adding to your stress levels trying to figure out cumbersome hacks to get around it. I encourage people to use the 'sketch' style and ...


3

I happen to disagree with the other suggested answers, so let me try to explain why. Appropriateness Is the use of your app in dark environments a core feature of the application? For example this is the case for an e-reader application or navigation application, but is not the case for a messaging application. If it is a core feature then I agree that ...


3

Use Code Styles if Possible Following recognized standards is advice often repeated in UX and this is no exception. Developers and software engineers are familiar with styles that display code as they can often be found in the documentation they frequently reference: Bootstrap Vue.js O'Reilly Books (Python) Stack Overflow (Java) Each example includes ...


2

Some UI hints that may help: Ellipses and Arrows Historically, Ellipses have been used to indicate the presence of a modal popup. Example: File->Print... indicates that a dialogue box will open for the user. Ellipses would probably suggest an AJAX action. Submenus are usually hinted using arrows. Tabs If the page is meant to represent a single record ...


2

It is called a "word cloud" or "tag cloud". I dont know if there are any fonts to make it. But you can do it with many webtools (such as wordie) or better you can render it manually using Adobe Illustrator or InkScape.


2

The generalized typography rule being applied is to avoid attracting visual attention to specific words or letters in a sentence because that slows down reading and comprehension by distracting the readers limited attention from the entire piece of writing. Anytime SOMETHING is larger or darker in a paragraph it encourages the eye to skip ahead to the bolder ...


2

The default is, as you said, to underline it where clicking on it will activate the phone app. Alternate solutions are all graphical-based, using the same mechanism but adding something to the number. Skype has a box around numbers, Google Hangouts puts a circle with an icon, etc. You can spend time doing that, but I recommend first offering the basic ...


2

Since there's not an established rule for this, I think this is very ambiguous, it depends on the person's developing (the layout, not coding or writing a program) style. A few months ago at job we had a serious debate about this. Everyone has different points of view. We finished with the idea that "it depends in the way your brain works". You can think ...


Only top voted, non community-wiki answers of a minimum length are eligible