6 ms·

Almost everything wrong with modern web UIs is arguably down to the contradiction of designing for both web and mobile at the same time. These two paradigms ar

• balder1991 2y ago
  What happens nowadays is that the big screens suffer and get a design made for mobile phones, with giant buttons and a lot of empty space.
• pupppet 2y ago
  Somehow mobile-first became mobile-only.
  • malfist 2y ago
    My large company just launched a project to encourage previous employees to come back and apply to jobs again. Business decided it would be mobile only, web support is 2 years away at least. There's been a lot of issues because, A, nobody wants to install their previous employeer's spyware app, B, nobody wants to do job applications on a tiny screen, and C, a lot of the step up authentication requires the web browser, but is explicitly disabled for these folks meaning lots of them can't complete login. It's completely bonkers. The worst part of it all is the mobile app requires authentication for everything, including resolving tracking links and shortened urls. These people HAVE to go to the webpage to sign up and get the mobile app, but then can never visit the webpage again.
• gedy 2y ago
  I actually support responsive UIs that work for small and large screen sizes - however, in past ~10 years this has been in vogue, I've rarely seen UX, product, or devs who really "get it". I.e. columns that wrap or resize, buttons that have labels and icons on desktop, etc.
• mrweasel 2y ago
  More and more I find myself wondering about the use cases companies imagine when developing websites and apps. My bank is trying to implement a new UI for their online banking and they are trying to mimic the UI of their mobile app. The issue I have is that the mobile app is already so dumbed down that it's pointless and I don't use it. When you have limited screen space you need to decide what to show first. For my bank it's the status of a MasterCard credit card I don't own on the first screen of the mobile app. Next is some pointless overview of my accounts. I say pointless, because all context has been removed, in favor of massive amounts of white space. Now they want to replicate this interface, but for larger screens. Most of the screen is white space and you have to click on everything to get details, details that would fit perfectly well, even on a small laptop screen. Also nothing is obviously click-able, because why would you add visual clues that just taints their beautiful white space. For the most part I think that companies would love to ignore desktops and large screens. In some sense they may also be afraid of presenting users with details overviews, either is to make everything seem more friendly, or to discourage usage.
  • ghnws 2y ago
    For the vast majority of people, the mobile bank app is far more useful than a desktop oriented web bank. Many (maybe most by now) don't even own a computer.
    • marginalia_nu 2y ago
      Why do we need one or the other? There's an accessibility element here as well. It's not possible for everyone to use a touch screen.
    • mrweasel 2y ago
      I do think you're right. I know a number of people that doesn't own computers anymore and even more who are just doing everything on their phone. One interesting usage I've seen is especially younger people, who have a debit card which doesn't allow an overdraft. They then keep their account at or around zero and only transfer the amount they need to the card account before every purchase. That usage is supported way better than my attempts at managing saving, paying large bills or keeping track subscriptions and other spending for the past week.
• antisthenes 2y ago
  > If you want to do both paradigms justice, you need two separate designs altogether. How do you reconcile this with the fact that you need almost double the effort for 2 separate designs? I'd say you need at least 2x of Designer work and at least 1.5x of front-end Dev work to achieve this. Where will additional resources to support this come from?
  • marginalia_nu 2y ago
    Design becomes quite a lot easier when it doesn't need to cater to multiple platforms and input paradigms. Testing is easier, there's much less need to make concessions and tradeoffs. If anything, having two designs that look and function well is less work than having one design that looks and functions well on two disparate platforms with completely different affordances.
  • mostlysimilar 2y ago
    Maybe the execs get paid less, what about that.
  • nottorp 2y ago
    > I'd say you need at least 2x of Designer work and at least 1.5x of front-end Dev work to achieve this. That's what you tell your customers at least :)
  • solardev 2y ago
    You're meeting your users where they're at. If half your visitors are using mobile and half are on desktop, then having two designs isn't 2x the work, it IS the work. Having only one means you're abandoning half your visitors and not doing your job fully. And having both is not really 1.5x to 2x the work, in my experience. Maybe more like 25% to 30%. A lot of components and widgets can be reused, the typography and colors can be similar, and certain screens can keep their layout with just small tweaks. Sure, maybe the initial design takes a bit longer since each screen needs several breakpoints. But that's only a small part of the overall design work anyway. Then on an ongoing basis, your previously established patterns (and components in code) can largely be reused with small tweaks, easily done with modern toolkits like Tailwind or MUI. I don't think it's that big a deal. Web devs have been doing mobile designs for more than a decade now, and the tools have gotten better and better. Honestly, it's way less wasteful than Agile ceremonies or endless meetings. If you want to stay lean and cut cruft, take it from places that don't directly affect the user, not the one place where they actually use your product all day.
• LarryDarrell 2y ago
  I have a 38" curved wide screen with 1600 vertical pixels. It represents the peak of all the monitors I have bought over the last 25 years. Me in the year 2000 with a 1024x768 17" CRT would be flabbergasted at the amount of wasted/underutilized space that exists today. Vertical space is precious, and it's why I paid more to have those 1600 pixels. And then Microsoft decides to not only enlarge the taskbar, but to not provide an option to turn it back to normal. I have to resort to hacks to wrangle MS Windows (primarily a Desktop OS the last time I looked) back down to size and reclaim my vertical space.
  • TheRealPomax 2y ago
    Although to be fair, "having to hack Windows to get the UI to be what you want" has been a staple of being a Windows power user pretty much since XP.
  • rerdavies 2y ago
    You need to rotate your display to portrait mode. ;-P Serious point: a secondary 1080P display in portrait orientation is actually quite fabulous. Documentation gets parked on the secondary display. Line lengths remain readable, and you get lots of vertical space.
• PaulHoule 2y ago
  Low density UIs were a scourge before mobile. There has always been a kind of designer who privileges "negative space" over everything else and can't imagine any greater luxury than having a 27" screen and devoting 26" of it to whitespace.
  • JoeAltmaier 2y ago
    Famously derided in the seminal work "The visual display of quantitative information". There they give the thought experiment: weigh the ink on your page devoted to data points, compare it to the entire rest of the ink. You want the largest ratio possible.
    • PaulHoule 2y ago
      Tufte is famous for his opposition to wasteful use of ink, or "chartjunk" https://en.wikipedia.org/wiki/Chartjunk https://en.wikipedia.org/wiki/Chartjunk which relates to a strong preference to use whitespace as a tool for visual organization. If you could separate two areas of the plot by drawing a line with them, Tufte would have you use whitespace instead. Tufte certainly loves complex charts based on complex data, drawn as economically as possible. He'd also recognize that there's a time for a simple chart based on simple data and that such a chart should be as simple as possible: if you want to make a bar chart with Excel with the last 12 quarters of revenue for your business for instance he'd accept that, but insist that you turn off as much chartjunk as you can.
    • rerdavies 2y ago
      Wouldn't a low-density UI yield an infinitely large ratio? Not Much Ink / Nothing else.
      • JoeAltmaier 2y ago
        If the 'nothing else' is blank paper. Any background, it's Not Much Ink / Entire Page Of Ink
  • ryandrake 2y ago
• deleted 2y ago
  [deleted]
• makeitdouble 2y ago
  You have a good point, though I'd say at the heart of it the issue is that design is just complex and there's no one true way to do it. You point out web vs mobile, but of course as you probably use "web" as a shortcut for "PC", web also applies to mobile. Then on a 27" screen you might have one window full screen or 20 windows overlapping and an actual 7" browser to display the site. And others will be on PC, but with a 13" touch screen. And others on a 10" phone but split in half. Then some people will increase text size and your design will need to deal with it. Before you realize it you have dozens of constraints and requirements to think about, start dropping some to satisfy others, and inevitably people will be pissed at the result.
  • marginalia_nu 2y ago
    The biggest problem isn't sizing or font sizes, most designs stretch and scale and deal fairly well with that like even if you kick it old-school and use tables. The big problem is catering to different input methods. A mouse has far greater accuracy than a touch display. You can put two links mere pixels apart on a desktop interface and that is fine because a mouse is more than accurate enough. The smallest interactive element a keyboard-and-mouse user can hit is probably about the size of a single period in a font. There are other issues with doing that, I'm trying to highlight the sort of accuracy you have with a mouse. A mobile user could never hit such a small target. On PC, you can enter text and show the full content of the website at the same time. You can search in the page with a keypress. You can open multiple web pages at the same time. That is not possible on mobile.
    • makeitdouble 2y ago
      Yes, although clicking links on a page with mere pixels between them is still a PITA for many users. I was reminded of this using the super cheap mouse and acquaintance was using on a dinning table, and getting precision was possible but really frustrating. And they didn't like trackpads. As more and more countries have aging population I'd expect these kind of accessibility issues to be more prominent. Sometimes I feel like using modes (vim style) could help, with the user getting different tradeoffs when "reading" and "manipulating", if there was an easy enough way to switch between one mode and the other.
• safety1st 2y ago
  I prefer to think that responsive design is still in its relative infancy and as an industry we simply have not completed the shift in mindset that is necessary. When we work stakeholders who are not technical it's clear that they're 1,000 miles away from the mindset, and the average designer is still somewhere from 10-999 miles away. Fluid design is a big step forward and while we still don't have anything near a bible these are some example principles: * Size elements relative to the size of the viewport, some things should be smaller on little viewports, some things should be a little bigger, the CSS units for this are still just coming together. Use formulas and percentages, not pixels. * Think about the correct layout direction for everything on a portrait vs landscape orientation, should those items be in a row or a column? This often requires only one CSS property to change * Hide information density behind an accordion or modal if you need to on small viewports, don't just remove the functionality for all versions of the application. When people strip away functionality, I find design is rarely the true justification -- more commonly they no longer want to pay the maintenance cost of the feature and are using a redesign as an excuse.
  • throwup238 2y ago
    > I prefer to think that responsive design is still in its relative infancy and as an industry we simply have not completed the shift in mindset that is necessary. Absolutely. We finally just got container queries! Responsive design using screen width was always a sham. A stop gap to all the work the browser devs and standards bodies had to do to figure out what worked.
    • whstl 2y ago
      You are correct, but I think we're lacking in things even more basic than that. Pretty much every single responsive design I ever worked had either the mobile or desktop version as an afterthought. The mobile was just a "scaled down" version that was done last-minute, or vice versa. Is there a sidebar? Hamburger menu it is. Is there a list? Well just put every row on top of each other. Sure, this makes things easier for the both the designer and the developers, but putting just a bit more effort in the "secondary" version would be enough to make both versions better.
• technojunkie 2y ago
  Except that studies show that users expect both similar content and experiences regardless of device. Responsive web design, with progressive enhancement, is the foundational bridge to make this experience work well. Just because someone experiences a less than ideal experience of RWD in one or more places doesn't mean to group all RWD UI experiences together as bad. It's more practical spend less time developing and testing one global component than more than one.
  • agumonkey 2y ago
    I think there's a "theory" of rotating UX (same features in one way when in one space, another way in another space). But I can't find writings on this.
    • technojunkie 2y ago
      Browser spec creators and browser vendors have been implementing touch and non-touch UI differences in common primitive features since the 2010s. Example, if you use at a <select> element on desktop browsers and mobile browsers, I would say it falls into a similar idea as rotating UX. There are countless other examples, too. Could there be improvements? Absolutely, and that's where we get to have a voice.
      • agumonkey 2y ago
        That's at the widget level, fair point though, but I was thinking about larger components.
• foobiekr 2y ago
  I think it’s actually that designers as a group feel like they should not have to understand the product they are designing. This is why the modern uis are so minimal and lacking in features for people who actually use the product in a way that is deeper than trivial. Imagine a current era designer trying to design Photoshop without just copying an existing system. It would be useless.
  • sirspacey 2y ago
    Figma is a counter-example. Designing for skill curve evolution is rare, but Webflow is another product that has achieved it.
    • foobiekr 2y ago
      A rare exception but also an exception in many, many ways, and a sort of hilarious situation that the UX people who use it almost exclusively produce terrible, dumbed down interfaces.
    • skydhash 2y ago
      Before Figma was Fireworks. And it was Figma and more with less dropdowns.
• agumonkey 2y ago
  Even the web was already taking a bad direction, too much interactive magazine instead of function/tool paradigm.
• deleted 2y ago
  [deleted]
• deleted 2y ago
  [deleted]