Tag Info

Hot answers tagged

43

I believe neither is “easier” to read in general, and I would instead try to make it a country-dependent setting that mimics the common book spine orientation, either in the visitor’s country or in the web site’s country. In Wikipedia’s book entry, the spine tilting section says the following: In the United States, the Commonwealth and in Scandinavia, ...


33

Short Answer Make them like tabs and follow that mental model (clockwise on right, counter-clockwise on left, upright on bottom). Medium Answer If your design uses tab-like elements, follow the logic of tabs. If it uses book-like elements, follow that model and pick a direction—if you're in the US, follow the orientation of book spines here (clockwise). And ...


27

The difference you're talking about is often referred to as "fixed width" versus "liquid" or "fluid" layout. Fixed width layouts are MUCH easier to design than liquid ones. When you design a liquid layout, you need to control many more aspects of the display. What happens when windows shrink beyond a minimum width? What parts of the window can stretch, ...


22

I agree with the user Jared Farrish: it's to make the content more readable. If a paragraph spans the entire width of the browser window, it can be taxing on the eye to move from the end of one line to the start of the next line if the paragraph takes up many pixels in width. Many websites tend to limit the width of the page for this reason. In addition, ...


20

Buttons are a traditional desktop software UI control - a context where the hand pointer has never been used before the advent of internet. When web pages started to use the same control, they just kept the button as it was in a desktop environment.


20

There is a study on rotated text readability from University of Toronto. Although it is on tabletop displays, I think it can be applied here too. The result shows that it takes significantly less time to read clockwise (-90 degree rotated) for words in any positions of the screen. It is not clear for 6-digit number though.


18

It's all about Affordance. Buttons have a high affordance which visually suggest how they can be used. The hand pointer is used when affordance is lower to provide an indication of how to interact with that item. 'Well-designed user interface (UI) objects are said to have affordance, which are visual and behavioral properties of an object that ...


16

Users hate slow UIs, just as they hate slowly loading websites. Pop in, fade out. Your users are not here to admire your application. It's just a tool to help them achieve a goal, and when that's done, it doesn't matter how pretty the app - they're out of there. Now, that doesn't mean you should strive for dull, grey, boxy interfaces. But it does mean ...


13

Generally speaking, using a grid system is nearly always a good idea: it's simply one of the best available tools to visually organise (i.e. compose) your content in a coherently structured, well-proportioned, yet sufficiently flexible manner. You might want to think of it as best practice. Most good designers regularly use them, unless it makes sense to go ...


13

There is no hover equivalent on iOS devices. The most conventional gesture to interact with content is 'tap'. You could have the content boxes open a pop-up or overlay on tap (which would work better on iPad than iPhone). Using other gestures which have no strong established convention could just confuse users. But it might just be more graceful and usable ...


11

As far as I am aware there aren't any industry standards. From experience they seem to differ slightly depending on who you talk to. Smashing Magazine recently did a good article about logical breakpoints for responsive design. Understand what resolutions the potential users of the system will be using. This should help inform your break points. My point ...


9

MIL-STD 1472F Section 5.14.3.5 has a pretty good section on displaying tables in a user interface, although it could stand some updating for modern GUIs. Here are some of the standards, along with my interpretation marked with a bullet for GUIs: 5.14.3.5.4 Titles. For a table that takes up multiple pages, column headers shall be on every page for table. ...


9

The best learning resource for this would be a good introduction on typography – probably the seminal classic by Bringhurst (see http://webtypography.net for a good roundup applied to the web), though e. g. Spiekermann's ‘Stop Stealing Sheep…’ is not bad for starters, either – and on design grids (see my answer here on UXexchange). When designing grids you ...


9

Use the em unit of measurement. That way you can easily scale between various devices based on the base font size that you're using. That way you can achieve a lot of what you need in terms of sizes simply by changing the default font size with media queries. Different devices have (or should have) different base font sizes with the default size order ...


9

Strikes me as very problematic. Adapting to a device's width is much more useful than adapting to it's aspect ratio. In most cases you wouldn't want the same layout on a 4 inch (diagonal) device as a 10 inch device, even if they have the same aspect ratio. Another problematic issue here is that, when dealing with text on the web, it's too hard to control ...


8

Set the containing elements style to text-align:center; set your image style to display:inline-block; margin:auto;


8

Why just popping in is bad: Nothing in the real world does that and thus it is disorienting for users. If something in the natural moved that fast and stopped right in front of us it would be startling, haha. The user must take a few moments to reorient themselves and return to scanning the new window. Why fading in is bad: It catches the users attention ...


8

Counter-clockwise rotation always feels most natural to me. It allows me to read left to right without making any conscious decision to do so. Clockwise on the other hand feels backwards. It feels very unnatural and makes me want to tilt my head to read.


8

Labels within fields go away as you start typing which means the context for the answer disappears. If you forget what question you are answering you have to clear the field and hope to see the label again. Also, there is no way to go back and check your answers, a nightmare on longer form.


8

With no further information this how you can improve your form: No abbreviation (they can be obscure for the user) No uncommon or useless symbols like [-] or [:] (useless is useless) Clear understanding of what is selected by default and what can be changed (no ambiguity, no over-thinking) download bmml source – Wireframes created with ...


7

Both CSS 2.1 and CSS3 Basic UI specs definitely say that pointer cursor is exclusively for links. One of the authors of the CSS 2.1 Test Suite wrote a following remark in W3C mailing list: Even when hovering the cursor over an <img onclick="...some function...">, a push button, a radio button, a checkbox, the cursor under Windows does ...


7

Interestingly, hovering the submit button on this comment form changes the cursor to the hand. I would say "arrow=do and hand=go" was probably a convention at one point, but it's been widely discarded through a) ignorance to it and b) better design. Make a button look clickable and the cursor change won't matter to the end user.


7

Sadly making the focus box clearer is not common enough. It's not just about the browser, it's also about the monitor - the setting of brightness and contrast and the quality of the monitor. The border of the input box can be indistinguishable from white on cheaper/older flat panel monitors - often found in schools. Light blues in particular are a ...


7

It's a popup. The user asked for it - so give it to them - right away. Don't slowly hold your hand out to give it to them, it's just annoying. The user knows what to expect, and the faster it popups up the faster the app will feel. There is absolutely no need for noticeably fading-in popups.


7

Stylize buttons Advantages: Buttons are more consistant with other parts of your design (provided your ui has style) The overall look and feel is improved (provided your buttons don't look stupid) Buttons can have more meaning (express different contexts) Users are very accustomed to styled buttons, as most of the major websites use them : google, ...


7

You could put them next to each other just like on the desktop version, but keep only one in view. Flipping to the left and right would allow switching between the packages and comparing the features. Be sure to clearly delineate each feature. Additionally, it might be useful to be able to look at a comparison of a single feature across the three packages. ...


7

The current trend is to design breakpoints with content in mind. At some width the content will appear either too squished (or stretched out) and that's when a breakpoint should be used to rearrange things, even if it doesn't correspond to a common device width. The content should look well laid out at any device width (within reason, no need to fill ...


7

You can use Gestalt principles to argue the textboxes can be confused for the buttons. Similarity Principle: "elements tend to be integrated into groups if they are similar to each other." The text boxes are the same size as the buttons, the drop shadow is in the same location and is the same size, there are icons on the left, and there is text inside each ...


6

Maintaining your current design... As mentioned there isn't a hover behaviour equivalent on iOS devices. Even if you implemented a 'follow the finger' behaviour, most users will probably be moving their finger off the screen, moving to the target and then touching the screen again. One approach would be to have small page curls in the bottom corners. This ...



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