Tag Info

Hot answers tagged

63

Accessory, not necessity The background should be an accessory, not a necessity. If the background weren't there, it shouldn't negatively affect usability. An example of a poorly designed website that uses the background as a necessity is Project Swole. Before the background is loaded, there is not enough contrast to read the text. When I access this site ...


17

You should not forget about page loading time. Load time is key factor in conversion from visitors to readers / users, and slow pages are extremely frustrating to work with. If the large image in question can't be replaced, you can mitigate the effects in five ways: Most of the background image in your new design is covered by your content. Why not just ...


8

The background you choose for your website has the power to set the theme and set the mood for your site at a glance. But the main aim of the background should be to enhance the visual experience and not to distract the user too much from the content. Analysis: The image with grey background has more depth and there is a sense that the content area is to ...


6

The most important thing is here whether page rendering is blocked by the image download (or if the page is incredibly ugly or unusable before images load). In your specific example the rendering isn't blocking anything (though the text shifts a bit for me in Chrome). Remember that rendering time is more important than total download time; this is "Time to ...


5

Check out https://www.spotify.com/uk/video-splash/ Spotify accomplishes text/button overlay on a video background pretty well. You could add a drop shadow via CSS to your overlay. Do you have any control over video selection? Take note of the types of videos the spotify splash uses. Note that some videos are very specific about the aperature used to shoot ...


3

The standard solution is to have the foreign text on a float which covers a small part of the viewport, e.g. white text on a black rectangle. You can make it look better if you choose a text color which is by itself likely to have high contrast from most other colors (your current white is great here) and give it a very fine border from a color which will ...


3

I believe you should be fine. The reason being the login box is subtle enough to blend with the background design but also stands out due to its color scheme . The login call to action due to its deep blue color also works well against the lighter blue of the aurora borealis since its distinctive enough.However if you are going to constantly change your ...


3

The biggest question to ask is always does it detract from the user experience? Is there something awkward, confusing, or slow you're introducing? Is there some usability or accessibility drawback? Does this change depart from useful conventions that make the user feel familiar with the app? I'm hard pressed to imagine a situation where an otherwise good ...


3

The important issues for UX are whether the advertising (which is there for your benefit and the advertiser's, not for the user's) impedes their ability to use the site successfully. Background advertising that is too prominent may confuse the user, thinking they are at the wrong page. If it blends into the content too much, it may induce banner blindness ...


3

Avoid background-position: fixed when possible. A fixed background increases browser rendering exponentially and can be the difference between a smooth scrolling site and one that feels slow.


2

You mention in a comment that "There is a menu for setting where you can set any image as background. So resizing or scraping is not genuine solution." If users can upload a background, that doesn't stop you from messing with it. I'd advise running it through an automated image manipulation program (like ImageMagick). You can cut out just the pieces you ...


2

While it's true that there is variation in colour between computers and browsers, the differences have been dramatically reduced in the last two or so years: Historically Macs used a gamma of 1.8, but in Mac OS X v10.6 (Snow Leopard), they changed it to 2.2 to match the native gamma of Windows computers. John Nack from Adobe has a great summary of the ...


2

There's no ideal size or de facto limits to the size of images (or any asset). Actual testing on various devices with various connection types is the best way to understand the impact of file size, and actually showing it in action to your client is the best way to make him/her understand the issue. Barring realistic testing, you can get more info on ...


2

The goal is to ensure easier reading when the user scans the site. Practicality aside, colour is obviously emotively persuasive. I would imagine that catering for the emotional well-being of your end users is as important allowing them to scan information easily. The grey you have chosen still provides a subtle contrast, partly because of the ...


2

You can post-load the image to help with the impression of responsiveness. To control your bounce rate you primarily need to focus on getting the interactive page rendered. As long as the image doesn't take more than 2 to 3 seconds to pop in you should be safe. As with any issue in UX, watch your stats. It's going to depend on your users' expectations more ...


2

Images tend to look better on a neutral background...any background color you choose has the possibility to clash with whatever colors happen to be in the image. I'm not sure what your app is for, but a degree of that orange glowing energy (and possibly discomfort) may make your users more quick or willing to act (the link below discusses these user forces ...


2

Check out the coloring used here: http://www.seattlecidercompany.com/, they manipulated the coloring so that white text would look good across it. Your video is very clear and draws attention to both the wording and the video at the same time. You might want to consider either playing with the color (like the link above) or playing with the clarity like ...


2

Use CSS if at all possible. Setting an image to a fluid width (that is, a percentage) makes it react to its container. However, if you're using one image across multiple viewports, you may run into some challenges. For example, if you are designing for a full width layout and using a 1600px width image, that same 1600px image loads on the mobile view. ...


2

I don't know that this would fit the motif you are going for, but a semi transparent band across the screen that the text sits in would make the most sense to me. Something like this: download bmml source – Wireframes created with Balsamiq Mockups With this approach, the area where the text lies, you will be able to guarantee that the text will ...


1

Designers widely call this as approaches to minimal design though highly debatable. In simple this makes the Comtent repo creation easier and job of visual designer simple since he has to take care of only two components in a full viewport as opposed to loads of content in usual approach. All that has to be taken care is the proper contrast with text against ...


1

You can add a dark text shadow to white text so it's still readable on light backgrounds. Depending on what is the main subject, you can also try to alter the video by adding a blur filter and a black layer (reducing his opacity). There is some other solutions : add an outline to the text, put a shape behind it (a filled square or a blured one, ...), etc. ...


1

As a general rule backgrounds for screens showing photos should be black, white or a shade of grey in order to minimize the apparent shift in chroma or hue via simultaneous contrast interaction. In other words colored backgrounds change the perceived colors of an image. A gradient background (colored or B/W/grey) will introduce another component that ...


1

In effects the matter is not strictly related to ux but with the web design in general. As stated by W3C in regards the <img> tag: "The img element must not be used as a layout tool" Images mustn't be used to make structural things like menus. You can use media queries in the css files to define a single class for different screen widths. For ...


1

Since you mentioned it is less than 1 second, it should be acceptable. The user's will notice the delay but not be distracted from the site in that much duration. Here is the rule of thumb developed by Jackob Nielsen 0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback ...


1

It's nice, but I'm not sure there's enough focus on the input form. Try increasing the opacity of the form or reducing the luminosity of the image (the bright green stream is too potent in your current design). Increasing the opacity of the form will also improve the readability of your field placeholder text.


1

I have a pretty slow internet connection. 250ko/s. I think that a good website don't have to let me wait more than 5 seconds to download all the website. Otherwise, internet navigation is an awful pain. So, calculating... 1 Mo is a good file size for a background :) If you do things well, you can make the background download silenty and print it when the ...


1

Letting the users choose one of those background images may be a good idea to add a personal touch. I always enjoy when sites, such as twitter, allow for theme modification; it makes it more engaging.


1

This is a workable idea and a commendable one at that. It may not have been pursued actively by most UI designers because of the constraints you already noted. However, with careful design, it can certainly work and provide a decent visual experience without being either distracting/disruptive or interfering with the foreground text. One other point ...


1

A brief search on google brings up some interesting articles on how color is rendered in browsers and what are the subtle differences A Brief Comparison of Font and Background Colors Rendered Across Major Browsers in Mac OS X To quote what the site says There is an unfortunate side-effect to Websites that sport light text on a dark backgrounds: in ...



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