Design language

Options
This discussion was created from comments split from: Electron.
«1345

Comments

  • gothmog
    gothmog
    Community Member
    Options

    The move to electron is horrible. The UI on the Mac looks awful. There is huge whitespace that serves no purpose all over the place. UI elements are less easy to distinguish from each other. Please don't do this. I want native applications, not electron crap.

  • Ben
    Options

    Hi @gothmog

    Thanks for your interest in the 1Password 8 early access. I understand the concerns about Electron: there are a fair number of terrible apps that use it. Like any tool though there is a right way and a wrong way to do so, and we feel we've found a good balance. The vast majority of the heavy lifting in our app is done in 'native' Rust, and Electron sits on top of that to provide the UI. The entire app isn't Electron — in fact not even a majority of it is.

    In terms of the design I think you may be conflating two separate concepts here. Whether the UI was built in Electron or SwiftUI it would look the same. I understand what is currently considered modern design language may not be to everyone's taste. Design preferences are super subjective. But we've built the UI based on accessibility guidelines and with extensive user testing along the way. Just a few minutes ago another customer commented:

    I think the new client (1P8) looks very swish, congratulations team!

    https://1password.community/discussion/comment/606547/#Comment_606547

    I don't say that at all to diminish your feedback. If there are areas we can improve we absolutely want to hear about them, but there will always be some element of taste and preference involved in any UI. To that point:

    There is huge whitespace that serves no purpose all over the place. UI elements are less easy to distinguish from each other

    Do you have any examples (perhaps in the form of screenshots) that you'd be able to provide?

    We'd be happy to take a look and consider the input. Thanks!

    Ben

  • gothmog
    gothmog
    Community Member
    Options

    Yes, I have tried it. And if you read my comments I am not talking about performance or memory usage. I am talking about the UI. And the UI is horrible. I am a developer and I understand the benefits of a common back end set of code, but the UI is what humans see and interact with. And I want a native, Mac user interface.

  • This discussion was created from comments split from: Electron.
  • Ben
    Options

    @gothmog

    I understand. I wasn't responding to you when talking about performance, I was responding to the poster who asked about performance. 😁 My response to you can be read here:

    https://1password.community/discussion/comment/606596/#Comment_606596

    Ben

  • gothmog
    gothmog
    Community Member
    Options

    @Ben Thank you for clarifying your comments, I am sure you are being inundated today.

    Talking specifically "design language" I understand it shifts, but my preference is the native macOS design language, which is why I use a Mac. So here is an example: Here is 1P7 vs 1P8 side by side showing basically the same view:

    But this is just not "what I find pretty," it is usability. In 1P7 I have over 20 entries in the space that 1P8 only shows 14. This is just one small example. I could also comment on the lack of visual distinction between entries in the list. Or the lack of command shortcuts in the menus (even though some of them work).

    But the bigger issue is one of philosophy. As I said I use a Mac because I prefer the user interface and believe it is superior to other platforms. I have muscle memory and habits that are built up around the way Macs work. And I want to support companies that support the platform I prefer. And 1Password used to be that. You were a poster child of Mac apps. It is why I have been a customer for over 10 years and why I have convinced 2 companies to use your product and why I hands down recommended your product to anyone who would listen to me. **I will no longer do that. ** You may still be the tool I use but it will be because no one has come out with an alternative (yet). But when they do, I will jump ship. And I will be unhappy every time I see the bill come (which I ironically renewed yesterday for next year).

  • camsoft
    camsoft
    Community Member
    Options

    @gothmog I agree with everything you said. I’m also a developer and have used this app for years because it’s a 1st class native Mac app. I couldn’t care less about what the backend is written in but the frontend the bit I see and interact with daily has to be native.

    The primary reason I use 1Password was for it’s native “experience”.

  • octanes_dunks
    octanes_dunks
    Community Member
    edited August 2021
    Options

    Echoing similar comments here.

    One of the main reasons I went with 1Password over other alternatives was because it seemed like the developers understood what it meant to make an app on macOS. I use the app Paw over Insomnia because it looks and feels like a native application.

    Now that newer versions of iOS and macOS offer better password management and one-time password generation I think this redesign is in the exact opposite direction you want to moving.

  • mrehler
    mrehler
    Community Member
    Options

    Really bummed about this change. I've been a standalone user for years, and I'll transition to a subscription without complaint, but it's a loss to see the app lose a lot of this native behavior.

    I'm grateful you're letting users try it ahead of time so I can see if I can stomach it.

  • toph
    toph
    Community Member
    Options

    Whether the UI was built in Electron or SwiftUI it would look the same.

    This… just isn't true. With SwiftUI, you get native macOS controls, and with Electron, you don't.

  • topher1078
    topher1078
    Community Member
    Options

    One case in point example - the preference pane in 1Password 7 operates as a Mac preference pane should - it's a separate window, can be dragged separately, resizes properly, the tabs are at the top as they should be, etc.

    The preference pane in 1Password 8 is not draggable, covers the 1Password interface, has horizontal sections, has tons of empty space, etc. Take that one example, carried over to the rest of the interface, and I'm deeply worried about 1Password's future on the Mac (which, obviously, is what made it as an app and service in the first place).

  • petvas
    petvas
    Community Member
    Options

    If the app stays like that I will be cancelling my subscription. I have been a loyal 1Password user for years and I used to love the app. Nowadays there are a lot of alternatives that can do the job, including iCloud Keychain and Notes.app with protected notes. Both solutions are free..Also note that on macOS 12 we are getting a standalone app for accessing the iCloud Keychain.
    I don't like Electron. You have been getting my money for years. I am going to cancel my subscription.

  • There's a lot of feedback to cover in this thread, so I'll do my best to address each and every piece. In particular, I'd love to dive deeper into the feedback on the design language, as that's one of the reasons that we decided to provide early access releases for 1Password 8. Before I do though, I want to speak to the concern about Electron influencing the design:

    Whether the UI was built in Electron or SwiftUI it would look the same.

    This… just isn't true. With SwiftUI, you get native macOS controls, and with Electron, you don't.

    @toph you are correct that we don't get native macOS controls through Electron. I think @Ben was referring more to the design language that we are employing. The design language itself would have been the same, regardless of what toolkit we were building the UI with. In other words, the amount of whitespace used and whether the preference pane is displayed as a separate window or a modal popover, these are not products of our choice to use Electron, but rather design-level decisions. Having you try these things out and provide feedback on whether they support you well in your daily use of 1Password 8 is of tremendous value to us!

    @gothmog I will certainly share your feedback on the additional whitespace and the choice not to use dividers in the item list with our design team. And we are currently working on expanding the support for keyboard shortcuts, so you can expect that to get better with each update throughout early access.

    @topher1078 strictly speaking, there's nothing preventing us from opening preferences in a separate window. We tilted towards displaying them in a modal popover because it seemed to fit well with a modal paradigm. For example, I'm either changing the settings or using the rest of the app, but never both simultaneously. Is there a use-case that you have that would be better addressed by having them in a separate window?

    I hope that all of you will continue to use 1Password 8 and provide us with this kind of important feedback during early access!

  • gothmog
    gothmog
    Community Member
    Options

    @mverde I appreciate you responding to the "trees" but what I am not seeing is any discussion of the "forest."

    Frankly I don't want to talk about the details of things that could make 1PW8 in its current form better. I want the Electron frontend thrown in the garbage. It will never be better than a native macOS front end. Talking about the details is a waste of time.

  • jwells1989
    jwells1989
    Community Member
    edited August 2021
    Options

    Regarding preferences being a separate window, it’s hard to list concrete situations where that’s useful, but there are a number of edge cases where having the Preferences panel being modal (and not actually a window) is insanely frustrating, because I remember running into them in several apps over the years.

    Electron apps consist of 95%+ of the offenders in this category, but a handful of native apps have been guilty too. Two examples are Slack and iTunes/Music, where it’s useful to be able to have the two windows side-by-side so one can adjust options and play with the the resulting UI in the main window until it’s tuned to perfection. These apps have modal preferences, so you can’t do that and end up with a laborious “ping pong” effect bouncing between the preferences pane and the main window, since the main window is obscured and can’t be interacted with. It’s also just kind of a waste of a full-fat OS with a nice floating window manager — this is a desktop/laptop, a device made for power users, not a smartphone/tablet/chromebook.

  • FCNV
    FCNV
    Community Member
    Options

    @Ben

    It's clear you aren't going to change your mind on this, but don't try to gaslight users and use passive-aggressive techniques like:

    "I understand what is currently considered modern design language may not be to everyone's taste."

    Who is considering this modern design? I personally think macOS 12's design is more modern and thoughtful than yours is.

    You aren't in good faith looking for feedback, you are just responding to users to explain why they are wrong. If I was sitting in your seat, I'd feel awful about that.

  • StevenBedrick
    StevenBedrick
    Community Member
    Options

    @mverde Please count me in as one more vote in favor of less whitespace and fewer (or at least optional) dividers. In an app like 1Password, information density is key, especially on computers with smaller displays (laptops, etc.). Also, note that desktop interfaces are not touch-oriented- laptops and desktops have high-resolution pointing devices (mice, trackpads, etc), so it makes sense to put UI controls closer together than on a tablet or phone UI.

  • Ben
    Options

    @gothmog

    Frankly I don't want to talk about the details of things that could make 1PW8 in its current form better. I want the Electron frontend thrown in the garbage. It will never be better than a native macOS front end. Talking about the details is a waste of time.

    I'm afraid we're at an impasse then. I just posted this in another thread, but it has been an incredibly long couple of days so please excuse the copy+paste. @dteare and @roustem have, at this point, been quite public about being smitten with the approach in v8. I also know that they both believe strongly that no decision is final. Electron isn't going anywhere in the near future, but we're not taking our eyes off things. We're going to work hard to continue our tradition of delivering quality software for the Mac.

    @StevenBedrick

    Please count me in as one more vote in favor of less whitespace and fewer (or at least optional) dividers. In an app like 1Password, information density is key, especially on computers with smaller displays (laptops, etc.). Also, note that desktop interfaces are not touch-oriented- laptops and desktops have high-resolution pointing devices (mice, trackpads, etc), so it makes sense to put UI controls closer together than on a tablet or phone UI.

    Many thanks. This is great feedback. I know our design team has already been brainstorming on this point.

    Ben

  • StevenBedrick
    StevenBedrick
    Community Member
    Options

    @Ben I'm glad to hear it's already under discussion, thanks for the reply.

  • danvpeterson
    edited August 2021
    Options

    Since this thread is titled "Design Language" I wanted to pop in as one of the designers here at 1Password. First off, I wanted to say thank you for caring so much, and to let you know that the design team is actively listening, trying to gather a lot of this feedback together, and will be figuring out how to incorporate it into the designs going forward along with all the feedback we've gotten from our early user tests, and other channels. Seriously, knowing so many people care means a lot. I've been here for 14 years and have helped to lead the design language through every version since version 2 and we all internally care a ton about this stuff and work hard to try to get it right, and to iterate and change things when needed.

    Regarding some of the spacing concerns specifically: to @mverde and @Ben's points, the designs for those were actually done before we knew what technologies were going to be used to build the apps. That's why they are saying it would have been the same regardless of the technologies used. Being "native" does not mean using only standard controls and 1Password 7 used a ton of custom designed controls throughout (including the entire sidebar and many of the buttons and other bits). Many of the Mac apps I love the most use completely custom interface components and spacing, using native AppKit controls. As Ben mentioned already, we have been playing with some designs using tighter spacing over the last few weeks as well (and earlier too).

    There are definitely some concessions we have to make in the design when using Electron, but there are a lot of concessions we've made with designs in the past due to what AppKit allowed, or at least based on what we actually had time to get implemented when working on multiple apps with very different frameworks, etc. It's a tough call and there are a lot of pros and cons on both sides. As a long time Mac-nerd, and someone that constantly pushes to just make the best apps we possibly can for our users (and ourselves) I've been on both sides of this and have had to acknowledge that it's much more nuanced than I originally thought, and that in practice both methods have their fallbacks and we need to move forward with what we think is going to help the most people with the knowledge we have. And continue to iterate as we gain more knowledge.

  • StevenBedrick
    StevenBedrick
    Community Member
    Options

    @danvpeterson Thanks so much for the thoughtful response; it's really important to us to hear from the folks on the inside about all of this. And thanks, as well, for so many years of making an app that always felt like it had a very high level of "fit and finish" with the rest of the OS- that is something that has always made 1Password stand out, and I think that the reason a lot of us are responding the way that we are to the advent of an Electron-based 1P8 is because it seems like there is a very large gap between what the 1Password UI experience has historically been like on Mac OS, and where the new Electron-based UI seems to be going in that regard. Some (much?) of what people are going on about may be unfair baggage that we are bringing from other Electron/cross-platform apps that we may have used or been involved in developing... but I gotta say, just speaking from my own experience, so much of what makes a "proper" Mac app a great experience is just not possible using Electron. Or, if it is, it's far enough off the beaten path that getting it "right" represents extra work, which in turn begins to erase the productivity benefit gained by going cross-platform in the first place. And from an organizational/management perspective, once the engineering decision has been made to go cross-platform with the UI, it's all too commonly the case that Mac-specific fit-and-finish stops being a design priority... I think we've all seen abundant examples of that, in the past. Obviously, this issue is well beyond the question of visual whitespace, but I think it's where a lot of us are coming from.

    To your point about custom AppKit widgets- it's true that many of the great apps (including 1P7!) make use of custom controls, but generally, because they are being built using AppKit, and are embedded within an AppKit view hierarchy, they typically "feel" like built-in controls. I'm thinking in terms of things like their scrolling behavior, how they handle/respond to keyboard focus and other events, accessibility APIs, menus behavior, etc. Those are the kinds of things that never seem to be quite "right" in Electron apps, and crucially they are also things that are very difficult to convey using screenshots- but they are immediately apparent when one is using an app.

    And you make a good point that the whitespace issue is hardly limited to 1Password's proposed design, of course- it seems to be the way the design wind is blowing in recent years (just look at the ever-growing expanses of whitespace in each new version of Mac OS), so there may be a certain element of "Old Man Yells At Cloud" to my feelings on the subject! 🤣 At any rate, I'm very glad to hear that that part of the design language isn't fully baked in yet. Thanks again for the reply and for the years of excellent software! We critique because we care. :-)

  • FCNV
    FCNV
    Community Member
    Options

    @danvpeterson thanks for that response. It was honestly the most empathetic and fair response we've received. The rest have just been the found and @ben belittling users for their design tastes.

    I just hope you can work within Electron to make it feel more like a Mac app and perform more like a native app.

  • crg9385
    crg9385
    Community Member
    Options

    As I mentioned in another forum post, I think a huge missing piece of the discussion (which @danvpeterson touches on briefly, thank you) has been clear information from 1Password on what is the plan from a design and Mac fit perspective. What is gained with Electron, what is lost, where 1Password is headed to close those gaps (if possible). Effectively, how do you plan making the "Electron" look/feel effectively disappear and make 1P8 a first class Mac citizen? Or does 1Password plan not to bother going that far?

    We all know that there has never been a first class Mac Electron app out there (VSCode probably comes the closest, but that is so dev centric it's in a separate category to be honest). Thus, we all freaked out for legit reason that 1Password's famous Mac experience will never be the same with Electron in the picture.

    The key to 1Password turning around this discussion, at least on the Electron piece (we'll leave out the deprecated features discussion on this one), is really explaining the design philosophy and plan going forward for the Mac.

  • The2ndOctave
    The2ndOctave
    Community Member
    edited August 2021
    Options

    @danvpeterson that's a lot for you thoughtful response. As a product designer myself all I can feel here is empathy.

    I may be on the minority, but I actually love the new visual language (it reminds me a lot of the Things app from Cultured Code — an app I've been using for many, many years). I like white space and I truly believe high-density designs are stressful to use. The new design feels lightweight and fun.

    That said, my main concern here is Electron's limitations and the philosophy behind building the same app experience for all platforms. I really hope the final 8.0 version feels more native and polished than what we have at the moment.

  • user12345
    user12345
    Community Member
    Options

    The question is, will you be doing all the work to make the Electron app behave like a native Mac app? Scrolling behavior, keyboard focus and all of the little and big things that make a Mac app feel like it belongs on the system? If so it will require a bunch of custom code and a lot of extra time which negates the use of Electron for a more unified codebase anyways.

    I'd much rather keep using 1Password 7 but once you publish 1Password 8 to the App Store I assume 1Password 7 won't be maintained anymore. Why not just tweak the 1Password 7 interface a bit and leave it at that? It works wonderfully and is a native application.

    The Mac application has to feel like a Mac application. It can't be a unified experience with all the other platforms. This new approach may elevate the experience on Windows and Linux compared to the current applications, but it will sure degrade it on macOS.

    It's bad enough that so many other applications are web based. I have switched from many apps to other solutions because of it. I want the Mac experience. It's why I am a Mac user.

  • octothorpe88
    octothorpe88
    Community Member
    edited August 2021
    Options

    I'm finding the beta version functions quite smoothly and well. What I don't like is how far everything is spaced out. I used to be able to see all of my favorites (9 of them) on one screen. Now I only can, barely, if I use the entire height of my MacBook Air. The problem is made worse by the unnecessarily tall height of the dividers. I'm not sure why they're so large, but it compounds the issue.

    I think there's some underlying assumption here that it becomes easier for the user to identify and select the login they're looking for if they're very separated by white space. I think the site icons do a lot of this work already, allowing the user to quickly identify a particular login. I know, too little space and things start to look cluttered, but I think it's skewed too far in the other direction.

    And of course this also might be a personal preference. I, for one, would welcome variable spacing, like the Gmail interface offers:

  • The2ndOctave
    The2ndOctave
    Community Member
    Options

    I like that suggestion, @octothorpe88

  • Thanks for this, @octothorpe88! I have passed this suggestion on to our developers. We appreciate you taking the time to share it with such clarity.

    ref: dev/projects/customer-feature-requests/#851

This discussion has been closed.