UX designer: why are "Edit" "Save/Cancel" at top op window in 1PW7?
Being in software development for over 30 years, having done many user-interface designs myself, I'm completely stumped as to why the 1PW team chose to move the "Edit" and "Save/Cancel" buttons in 1PW7 to the top of the window in 1Password for Mac. What were you thinking? Please provide me another example on macOS, Windows, Linux where this is considered normal. I mean, come on, even this very forum post shows the "Save/Cancel" buttons in their natural position: at the bottom, when I'm done typing, fitting the natural flow of looking/working from top to bottom on a screen (or paper, for that matter).
Really, I'm interested why anyone in your team would think that 1PW7 would be a great opportunity to break with desktop computing GUI standards of the past 30 years, and what their arguments were to convince the rest of the team (there must have been sane people objecting, right?). Stumped...
1Password Version: Not Provided
Extension Version: Not Provided
OS Version: Not Provided
Sync Type: Not Provided
Comments
-
@Karel: Thanks for getting in touch! It isn't clear to me from your comments, but it sounds like maybe you don't like those buttons being at the top. If so, could you elaborate on the challenge(s) that poses for you? If it's something workflow-specific, it would be helpful to know so we consider it along with everyone else's feedback as we design future versions of 1Password.
But since you asked for an example...well, I have to say, on macOS, having menus at the top has been "normal" since 1984. I know this isn't exactly the same thing, but at the same time I'm not sure there would be a benefit to having the buttons at the bottom either. If you're typing, it seems like, with your fingers already on the keyboard, using it to save (
⌘ S) would be more natural anyway...as opposed to switching to the mouse and moving the cursor around (which would likely be toward the top, since that's where you selected a field to start editing in the first place). Given that, I can't see a good argument for keeping it the way it was necessarily either.If we look at "desktop computing GUI standards of the past 30 years", there's not really any agreement anyway. There isn't really a "standard" for all computers, since there are different conventions on different platforms. And these buttons are pretty unique to 1Password (a lot of apps just keep stuff like this in their menus), but since they are commonly used functions it seems useful to me to have them right there for people who do prefer to use the mouse.
Anyway, it's always interesting to hear from folks with different preferences. We can't accommodate everyone's, but we're always glad to hear different perspectives. :)
0 -
@brenty, this is UX 101 for anyone born before 2016. I have two Google Image search links for you:
Save dialog Windows
Save dialog macPlease note in the resulting images on those searches where the "Save/Cancel" buttons are generally placed. You may have missed it, but on desktop operating systems since 1984 (maybe even earlier on the Lisa), the buttons to save/cancel in a dialog window (modal in earlier days), the buttons go in the bottom right of the window/dialog. In the "Macintosh Human Interface Guidelines" (one of the first books ever to comprehensively explain intricate details on user interface design) of 1992, on page 197 you will find an illustration of an "Alert box" and the elements that go in it. The HIG even tell us why elements are positioned that way:
"The Western reader’s eye tends to move from the upper-left corner of the dialog box to the lower right. Put the initial impression that you want to convey in the upper-left area (like the alert icon), and place the buttons that a user clicks in the lower right. Following this guideline makes it easier for users to identify what’s important in a dialog box."
But hey, why would you follow this gold standard that's been around for decades, to which everyone is used to, was used in 1Password before v7 and not just move the buttons to a position that is completely non-standard and see if it sticks?
I'm being slighly sarcastic here, but I really don't understand it. You're a professional software company, there must be at least someone on the 1PW development team that must have objected to this "improvement", right? If not, then I'm worried.
0 -
@brenty, this is UX 101 for anyone born before 2016. I have two Google Image search links for you:
That seems unnecessarily ageist, and a miss -- I definitely remember the 80s. :tongue:
Save dialog Windows
Save dialog macI don't think it would be a better experience for 1Password to use file save dialogs -- except when actually saving files, which it does (e.g. save to Dropbox, export, etc.).
Please note in the resulting images on those searches where the "Save/Cancel" buttons are generally placed. You may have missed it, but on desktop operating systems since 1984 (maybe even earlier on the Lisa), the buttons to save/cancel in a dialog window (modal in earlier days), the buttons go in the bottom right of the window/dialog. In the "Macintosh Human Interface Guidelines" (one of the first books ever to comprehensively explain intricate details on user interface design) of 1992, on page 197 you will find an illustration of an "Alert box" and the elements that go in it. The HIG even tell us why elements are positioned that way:
Again, what you're describing in 1Password isn't a save dialog at all, so it's not applicable.
But hey, why would you follow this gold standard that's been around for decades, to which everyone is used to, was used in 1Password before v7 and not just move the buttons to a position that is completely non-standard and see if it sticks? I'm being slighly sarcastic here, but I really don't understand it. You're a professional software company, there must be at least someone on the 1PW development team that must have objected to this "improvement", right? If not, then I'm worried.
No worries. While I think you could probably say the same thing much more nicely (and, frankly, it seems like it's easier to get your point across clearly without all the fluff), I'm glad to hear it either way. I don't expect we'll be changing button positioning at this time, but it's something we'll keep in mind along with the things others request going forward. Thanks for taking the time to share your preferences with us. :)
0 -
I'll chime in. While it's nothing that I personally think is a big deal, I can certainly see the OP's point. When making changes by clicking the Edit button at the top as a user you will work your way top - down. Typical UI convention would then make the Save and Cancel buttons available at the bottom. That way you don't have to move your cursor all the way back up to the top to access these buttons. I imagine a UI decision was made to maximize the space for content by re-using the space at the top for all the buttons and a valid argument can be made for that. But a bit of usability was sacrificed in the process. I suppose since I don't do a whole lot of editing of my 1PW entries I don't notice it very much but I can see how this would be a little annoying for those who do. In any event, just food for thought.
0 -
I don't personally think that is an unreasonable point, but not being a designer myself I defer to those who are. I'm happy to pass the feedback along to them. :+1:
Ben
0 -
brenty
While I think you could probably say the same thing much more nicely
Definitely true, and the "fluff" is my futile attempt to get my point across, better. But my initial answer is still hanging in the air: "why break something that worked perfectly for many releases, adhering to GUI standards that go decades back?". It's details like this that the 1Password team always seemed to get right, and one of the main reasons I chose 1Password over competing solutions. This decision is just plain weird to me.
I don't think it would be a better experience for 1Password to use file save dialogs
Sigh... seriously? So because I'm using "Save As" dialogs as an example to where "Save/cancel" buttons are logically placed, you're now turning my criticism around suggesting I'm proposing to use "Save As" dialogs in 1PW edit mode? Classy.
Just to be sure: I'm not asking for some new feature here, I'm just asking why the choice was made put these buttons in this new, counter-intuitive position. It was working perfectly, now it's just weird and deviates from standards and any program I've come across, ever. Too much to ask? Wrong tone? Enlighten me.
0 -
It is not “broken” just because a couple custom buttons aren’t positioned where you happen to want them. That doesn’t mean you’re “wrong”. I don’t think you are. But by the same token neither is the current design. The problem is that you’re hellbent on being “right”, and this is a subjective matter, not an objective one. And every UI decision does not need to be justified to or approved by you. Like I said, we can consider your feedback as we develop future versions, but we need to consider others as well, and not give your words more weight than the rest of the 1Password userbase.
0 -
Thanks so much for the feedback here and sorry for my late reply! I meant to chime in earlier but was on my phone when I first saw it and wanted to put some more effort into the reply. I'm happy to explain some of our reasoning here. In most Mac apps, you're right, Edit/Save buttons are typically on the bottom and toolbars are on the top. In version 7 we added a toolbar to the top of the item detail view and moved the item action buttons there (favorite, share, new window), as well as the edit function buttons for a few reasons.
In past versions of 1Password there had been some issues with not having a toolbar on top for obvious draggability of the window (you could drag the window from that area before but for many users it wasn't as obvious as it just looked like part of the item’s detail view). Also, item actions were mixed into the header of the detail view, which wasn't as intuitive as we would like for many users and was very limited for space. On top of that it made it feel like then the header section needed to be non-scrollable as it was awkward to have those details scroll off the top of the window with no bar there and we wanted to keep the action buttons in view. This took up a ton of space and left room for improvement in those usability areas I mentioned.
We could potentially have both a toolbar on top for draggability and the action buttons, and then the edit/save buttons on the bottom but not only does this take up more real estate but it also complicated the UI (should the buttons on the bottom be in a bar? Or should the bar appear/disappear when scrollable content was there for just one example). After trying out a few designs early on we decided to create the toolbar on top and move the edit functionality up there as well since there was plenty of room and we wanted to see how it felt in use. Throughout our alpha and beta testing we found that people really liked the toolbar like this and didn’t hear of any user issues in finding any of the functionality.
While the bottom is more of a standard place for edit functions on macOS it isn’t on all platforms (particularly iOS for example) which I think has helped some users already become accustomed to looking there. Of course iOS has a number of different UI conventions that wouldn’t be appropriate to bring over to macOS, but although I find “this is how others have always done it” to be a good starting place for UI design, breaking conventions with reason is something I do believe in. In this case I felt that the upsides of the new design that I’ve mentioned above, outweighed the downside of that initial familiarity. Once you realize where those buttons are (which I don’t think takes long or has caused any confusion in our testing), it’s very simple and doesn’t hamper usability. Basically I found that the good outweighed the bad. As with all UI decisions, we will continue to evaluate things like this and it may change in the future but this is the first I’ve heard of it bothering anyone since 1Password 7's launch.
Dan
Lead Designer, 1Password0 -
I have to agree with @Karel here. After 35+ years of using computers, 25+ years of that using GUI (Windows mostly, Mac for a good 10 years, and Linux off and on for 20 years (now my primary)), to have a program suddenly change convention like this is jarring. And it doesn't help that 1password.com has it at the bottom where it's both expected, and has been since the beginning of 1password, so going back and forth (1password.com and 1PX in Linux, 1password 7 in my Windows VM) just reinforces how bizarre it feels having them at the top.
0 -
@danvpeterson Dan, I must have somehow missed the forum notification on your reply. I did see @jay_gunn 's reply just now, and saw yours when I checked out this thread.
Thanks very much for your detailed explanation on why your team have chosen to put the Save/Cancel buttons in the top bar. This was exactly the reply I was hoping to get. It's clear that you have put considerable thought into it. But personally, I can't get used to it to have "Save/Cancel" at the top, neither on iOS (on which I find UI-standards to be less defined, I see different 'solutions' even in Apple's own apps). The convention of having these buttons at the bottom is not merely good because “this is how others have always done it”, but it makes very good sense to finish editing a form by confirming/canceling at the bottom, considering we humans read/process information on a screen from top to bottom, even in languages/dialects where writing is right-to-left or top-to-bottom. For the software I produce, if it "feels" natural to users, it will always outweigh any other consideration.So thanks for listening to my complaint, explaining clearly why this choice was made. I'm keeping my fingers crossed that the buttons will magically move back in their logical position in a future release ;-)
0 -
I just updated to 1Password 7.3, and hmmm...
Click "Edit", in the bottom-left:
...then choose "Cancel", in top-left...
...and end up with the "Edit" button... in the top-left...
Does this seem right to you? The buttons are in the wrong place, without doubt, but why no consistency here?
I feel your pain trying to improve the product, because some things are indeed very hard to explain to new users. But man, for existing users moving so many UI elements with a dot release is really annoying.
0 -
@Karel: Keep in mind that when you click "Edit", you're then in a brand new window, not 1Password mini any longer. In the main 1Password app, you stay in the same window to edit, so it's all the same layout. I'm not sure it's a good idea to put "Edit" right at the top of the detail view in mini. But it's a fair point. I'll bring it up with the team. :)
ref: apple-3262
0
