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

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

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

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.


4

It doesn't need to be a modal or a new window, you can use the footnote model - just allocate a special panel at the bottom of your screen for these annotations, and make sure to distinguish them visually from regular links. So when a user taps an annotated word, the panel would come up at the bottom and display the definition. On tap elsewhere on the screen ...


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

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


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

First of all - not ABCD... but autocomplete in search (consider Cyrillic, Greek or other alphabets). Drag-n-drop is a beautiful feauter, but consider dragging aprox. 50 elements. I will be extremely time consuming. Clicking on item on the left to assign it to group will be much easier. For mobile my proposition is to switch view between Available <-> ...


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

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


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

A dedicated footnote section is a good solution, but I wouldn't focus only on inline solutions. A popover is not necessarily that bad. The downside is that it covers a large portion of underlying text, but the upside is that the size is flexible: it can grow for longer definitions, making the need for scrolling to read a long annotation less likely. ...


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

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

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

For very long lists, it's better to use a different UX for mobile Multi-select is a complex operation, so it's difficult to use the same interface for both web and mobile. You already recognize this because you've outlined two different layouts. Your mobile design is problematic because: It requires users to tap once to add an item, and then select ...


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



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