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


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


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

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

Not really. Although not terribly up to date, the following illustrations demonstrates the concept of breakpoints well: What's important to notice is that often the same device (iPad, for instance) will fall into a different area when in landscape or portrait. A more up-to-date figures are provided by Bootstrap: There are 4 'areas' and 3 breakpoints. ...


3

How about "Fixed width (original size)" and "Match my screen width"? Since your audience is 40+ and not really tech-savvy, they probably aren't going to know what "Adaptive size" is.


3

The key thing is to retain 100% of the sites meaning while reducing the size of the screen. The device used to browse your site should not dictate the contained meaning. For text this means that it isn't ever removed. Even if it is hidden (think of a menu put into a hamburger for example) it should still exist in an accessible way in the HTML, either for a ...


3

I have used the following listing to justify a minimum of 320 wide: http://viewportsizes.com/ While it's not completely exhaustive, it's expansive enough to make the point that there are only a few phones in the last few years that have <320px screens, and I have never had anyone argue that the number isn't de minimis. If you're doing this for ...


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

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


2

Consider setting up a subdomain url which points directly to the most significant page of your new responsive functionality. This will give your mobile users easy access to part of your software which is ready for their use. Alternatively, you could add some onload javascript to your main application's home page to check the browser's screen size; if it ...


2

Do it Breakpoints serve at the pleasure of content Far too many "responsive" sites are designed to fixed breakpoints, and fail to size smoothly for screen widths in between the breakpoints. At best this is brittle responsive design and at worst it's barely responsive at all. Notable offenses include column layouts and images which size OK at fixed ...


2

The BBC have handled their move to responsive from separate m.bbc.co.uk sites, quite nicely with different sections being rolled out in an opt-in beta fashion initially, then eventually live to all users. They have some articles on the progress of this change on their Internet Blog - Rolling out Responsive BBC News worldwide: what have we learnt so far? ...


2

Our company is currently dealing with a redesign. We have a complex web app with very specialized functionalities within different modules. It will take a long time to implement the redesign. And when we started evaluating the pros and cons. We quickly realize, incremental updates is the way to go for these reasons. Our users are dealing with an entirely ...


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

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

Having different categories is fine. However, I foresee your users using the search function far more than the navigation because people already have a "shopping list" (might not be a bad idea to implement on the site). They will look for those specific items immediately - might cause them to search immediately for what they want. The key here is to have a ...


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



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