Hot answers tagged

74

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 ...


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 ...


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

well, roundness of buttons comes from the Contour Bias concept: Contour Bias is a well-studied theory that shows that humans prefer rounded objects and choices over angled ones. The more angled, the more that human brains reacted with activity in the brain associated with fear and flight. in theory, your 50% rounded button should work better, and ...


5

Maintain grid alignment For complex flows and hierarchies, grid alignment is crucial for calming the complexity and providing a sense of order to the user. If you get the grid layout correct, you can de-emphasize the arrows because the user really only has to look at the arrows once to understand how to navigate the flow (so you don't have to make them ...


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. ...


3

I have never designed with something like a television in mind, so you bring up a great question. For instance, is there any kind of standardization among TV sets for displaying pixels? Even if it expands beyond 1920x1080 in pixels, does it display websites at that resolution or do handle things at 2x (or even 3x, 4x, etc.)? I would expect that even with ...


3

Why not have arrows that explicitly point the the next circle in the sequence even when it's on the next line: download bmml source – Wireframes created with Balsamiq Mockups But, FWIW, I don't think a vertical array of things implies the top element is more important, just that it's first in the sequence. Circles and arrows could be used to ...


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 ...


2

Do you have any header/footer bars available in the app? The first thing that came to mind is Google's auto-save notification across their apps, which they display on headers and footers. This is a subtle, yet informative way to display the saving status. Google Drive (header) Gmail (footer)


2

The only reason to do it for SEO purposes is to increase the number of web pages. That's a bad UX reason, and that's typically why big brands avoid it. Then again, big brands have SEO handled. So many don't need to worry about it.


2

There have been several studies to the effectiveness of carousels. The effectiveness differs slightly per type of website, but the click-through-rate is horribly low on all accounts. Some as low as 1%. So chances are big visitors will miss information. And like Poyi said, carousel also have the nasty habit of changing content while visitors are reading. ...


2

This is the pivotal question. Are the dropdown "filters" important controls where majority of the users will select one or more options before clicking "Apply"? If these dropdown items are important You would want the user to scroll pass the dropdown list to confirm they have selected the correct options before hitting "Apply". If these dropdown ...


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 ...



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