Hot answers tagged

75

If your app is the same as your website, then why have an app? As a mobile user, it drives me crazy how every single website tries to convince me to download a dedicated app, which often turns out to be nothing more than the same web functionality repackaged. This adds no user experience benefit at all. I'm sure the company in question thinks it is a ...


9

Check your assumptions There are a few assumptions in your question that require validation (and I assure you that the ecomm giants are testing). Most people have big monitors now: Maybe. But what about their viewport? And who might you leave out when your target is everyone (like Amazon)? Older users often have their browser zoomed and don't even realize ...


9

I hope this answer this question, but this is my personal process: I use the font sizes in my PSD mockups for reference purposes only, almost as a 'relative' size. Then after Design is approved, along with the assets, I create a separate html / CSS basic file as a style guide (a bit like a style tile) where I define the real size for all fonts and see how ...


8

The Android could throw the Apple out the Windows When you provide an Apple-like look and feel on a website, would people visiting the site who use Android phones, Samsung tablets, Windows phones, Surface tablets, and Windows laptops will see the same thing? If so, do you see how the Apple experience might not be familiar—or welcomed—by non-Apple users? If ...


7

Your best bet in this case is to make the left column fixed and allow scroll on the remaining columns. You can see an example (and script to do it) at DataTables Fixed Columns. On top of this, since your scrolling columns are dates, I'd use some graphic effect to make these dates scroll and pass below the static variables. This way you improve visibility ...


7

Technically this is caused by the fact that images and other assets are generally hosted separately, and the browser only knows to go fetch them when the document uses them. It would be technically possible to delay displaying anything to the user until all the assets were ready (a lot of old-school Flash sites did this for instance, with a loading screen ...


6

I would not recommend this approach. The whole point of responsive design is to avoid having to create multiple versions of the same page. There are many reasons why refreshing the page on a breakpoint will prove problematic: Maintainability - you as a developer will have to maintain two separate pages for each page, making sure when you update the ...


5

Stop using "user-scalable=no". Period. In the last 6 years, I cannot count the times that I've had to put away the iPhone and go to a desktop computer to examine something on a website because it simply wasn't visible and there was no way to increase its size because of this particular meta-tag. This is far and away the most useless tag. I wish it had ...


5

Line wrapping and correct indent / whitespacing download bmml source – Wireframes created with Balsamiq Mockups Spacing between options in above example should be a tad tighter, but you should get the idea.


5

Let the user see their whole image As this is out of your control due to users uploading images, you will find people will be more frustrated with having their image cropped off than having some white space making your design feel messy. I created a Gallery control at one point for a client and I used "overflow:hidden" to allow the image to fit in to MY ...


4

This is an interesting question. Dropdowns: Nope I would hazard against using a dropdown. In general, they're frowned upon for mobile UX because they require a "tap" to view the options, and another to select one. Segmented Controls: Maybe Normally, this is where I would point you. It might still be an option, depending on your data. Instead of going ...


4

EM and PERCENT are both very similar, the only difference between the two can be observed when changing text size on the client browser. Summary In theory, the em and rem units are the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users. Original ...


4

Nice question - I am looking for other answers than mine as well! @ Version 1: Android introduced this as a more "standard" element for mobile apps (swiping screens that mimic "tabs"), when iOS still went for the segmented control as the only opportunity to go for tab-like structures. So Android wanted to have more complex architecture, while accepting ...


4

Rectangular. A square grid can create an optical illusion called the Hermann grid illusion. https://en.m.wikipedia.org/wiki/Grid_illusion The squares of this size will not be readable for users, there is too much of them in the grid to keep users interested. I suggest you increase the size of cards and decrease the amount of cards per screen to 8 or 12 max. ...


4

Density-independent Pixels Sounds like what you're looking for is Density-independent Pixels. Even though you might be working in @2x sizes, the final result is the same. The code will remain Font-size: 24px; on desktop and mobile. The higher density screens require specific solutions for visual elements such as images and icons, but not for the basic ...


4

Two usable options come to mind. 1. Accordion menus 2. Sliding panels


3

Centered. The F-shape only matters¹ for the content, not the whitespace. You can liken it to reading a magazine on a desk. The contents of the magazine need to be arranged carefully and have to take in to account reading order and such; this is similar to the actual content block/column on a website. The desk is analogous to the (browser) screen. You ...


3

There may be many reason to prefer a fixed layout instead of a responsive or a fluid one. This answer (in my opinion) can not be exhaustive unless it's applied to a specific case: I do not think there is a best solution that should always be used. You're asking about fluid layout (built using percentage of width) but there are also: responsive layout (built ...


3

You seems to have a lot of links. I would usually reserve buttons for call-to-action and limit them to one or two. This is to prevent users from drowning in a sea of buttons and to differentiate them from normal links. The buttons show you a list of recipes for that category you would then click on them and drill down for the details If all the ...


3

"Loading" screens, progress bars, spinners, or the like are necessary for operations which take enough time that the user needs reassurance that the program hasn't crashed or become unresponsive. For shorter-duration operations, a spinner or loading screen can actually increase the perceived duration (if not the actual duration) of the delay. There has ...


3

If I'm understanding correctly, I think the question should be "Why sites loads websites gradually?" . See to answer your strict question, browsers do whatever you (where you is the developer, site owner, etc) tell them to do. There's no magic, if you tell the browser "do A, then B, then C" that's exactly what the browser will do. However, if the question ...


2

I would invoke the UX classic 'Fitts's Law' here. While not the perfect rule in situations like this, it is a good concept to consider. Basically - it'll take the user longer to get the cursor over to the menu, and longer to notice the page has been updated having selected an option the further the menu is from the main content (where they are likely ...


2

As far a I know the F-Layout applies to the actual content area not the whole screen. So if that content block is centered like in your first picture the blank space will be ignored and the F-Layout begins when the user finds the content. Look at this image: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ Even though some of the main ...


2

There should certainly be a difference between the native app and the mobile web page. Not only does dan1111's point ring true - why bother with an iOS app if you're just repackaging the web page without changing it much - but you should make it play to the strengths of the platform. What's important about a mobile webpage? Small download footprint ...


2

In terms of behaviour, there is no difference. The difference cited above is simply a buggy browser implementation, in my opinion. I just did a quick test in current Chrome and Firefox, and there is no difference in sizing of child elements : smaller; : larger when the parent is either 1em or 100%. I would very be surprised if this bug was present in any ...


2

Option 1 Pros: A scrolling nav menu not hidden behind a menu click is visible Content is discoverable works well with mobile Cons: Anything more than a couple of items in is not immediately obvious Is an unfamiliar pattern for many desktop users, although this is highly dependent on your user demographics. I would use this when you are displaying on ...


2

If you only place text inside the cards a rectangle is often more economic in terms of space. download bmml source – Wireframes created with Balsamiq Mockups


2

I would not make this so complicated. I would have 2 large numbers, with the label below them. Selecting them should act like a filter or tab on the table of reports below. If they are to act on the reports pending approval, make the color stand out - your link color or red if it's incredibly urgent. The approved reports should be a very readable gray ...


2

I can relate to this, for a long time we've been pushing to go at least partially responsive for our e-commerce website. The main reason I believe is conversions. the fear of something that already works well will be broken in the process. While Responsive is the trend and probably here to stay with the increasing amount of devices and and resolutions, in ...


2

Full-width and fluid are two distinct things. If you have a page of text, you would not want it any wider than a comfortable width for reading (52-68 characters per line, including spaces etc). In such a case, white-space helps to give a clean, uncluttered feel and avoids distracting the reader away from the text. If you have an image gallery, ideally you ...



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