New OTP QR Code Scanner Behaves Badly + OTP UI is in need of some major love.
I was happy to see that OTP's are now supported across iOS and Mac versions. Yesterday I transferred about 10 OTP's from Authy to 1P with mixed results. I tweeted about it and in response to this reply here are my issues:
The Scanner:
First. The new scanner window that pops up is not clear on how it should be used. I watched your 1P OTP video guide, but sadly that guide did not actually add a OTP from a QR code (Hint hint, needs to be fixed). The missing part was scanning from a QR code on a webpage. Anyway, when I tried to use it on real QR codes I could not initially get it to work at all. I was dragging and dropping it on top of QR's with no luck. I was resizing larger and smaller, no luck. Only later did I figure out that you have to hover it over a QR in order for the green flash to occur and the code to be imported. This is not an intuitive behavior. It should also work when dropped, after a resize, or if you manually click a scan button (which doesn't exist yet).
Also, there were some occasions where I just could not get it to work at all, even after I figured the above hover behavior out. For example on gmail or google apps accounts I had to resort to throwing away my 1P WIP changes on the desktop, and scanning the QR with my 1P on iOS in order get the code stored and working. Then it would sync over to the mac and work fine.
The User Experience:
Next issue is in the UI for adding a OTP. If I had not viewed your video guide, I think I would not have ever discovered that you needed to add a new 'section' with a label of my own choosing (e.g. OTP) and tab over two times in order for a small button to appear, which I then have to click to choose the OTP type, which then will show another button (qr code icon) which I then have to click to pop up the scanner, which I then have to hover, but NOT drag and drop, (after re-arranging windows) over a QR code, and then click save to actually make the TOTP active.
You can see by reading these steps that this process is terrible user experience. Terrible and undiscoverable. There are more than a dozen user interactions required to add ONE OTP!.
OTP has to be discoverable without using the help, nor watching a video guide before hand. Will I even remember these steps in six months if I don't add any OTP's in the interim? Doubtful.
Also, you should add a filter (smart folder) that will show me all services where I have a OTP defined so I can find them by that later and see all of them in a group.
You can do better AgileBits. Make it clear and up front, and just as importantly it has to be consistent with the iOS experience (which it currently is not). You are FAR behind the ease of use of Authy, or Google Authenticator. You should be leading instead.
I look forward to trying new versions.
Glenn
Comments
-
Hi @grempe,
Thank you so much for the feedback. I love reading this kind of honest feedback.
The process of adding an OTP, or any custom type field is... well let's just admit it, it's really bad. It's not worth discussing it cause we're well aware, and we're working on it.
But I'd like to get more info about your experiences with the scanner. If I'm reading correctly, you're saying that you dragged a QR code image onto the scanner window and it didn't accept it? Did it show the green (+) icon to indicate that you could drop? I'm considering requesting that we change this window to have it be less smart and instead of having it just "automatically discover QR codes" under it, instead have a Scan button. Our solution there may have been too "smart".
It would be nice to have a way to quickly find all items that contain OTP like you said. It's something that's under consideration here.
Looking forward to hearing from you, and I hope the next versions will get us more in line with your expectations.
Rick
0 -
Hi Rick,
Glad the feedback is heard. That's what makes your product stand out (in most areas :-).
Regarding the scanner window, no I didn't drag a QR code onto it, I dragged the window to the QR code. Not all QR codes on websites are images, some are generated by JavaScript or embedded in a PDF and thus are not draggable. The Gmail one is a mystery to me why it was not able to be scanned, but that seems a high priority one to fix.
The 'scan' button I think you are referring to is the small QR code icon within the edit page. When this pops up the scan window it has the instructions 'Place this window over the barcode to scan it or drag and drop the barcode here'. What I was initially doing was dragging the SCAN WINDOW over the barcode, so the alignment lines surrounded it, and I was DROPPING the window there (expecting that to trigger the action). Instead you need to HOVER the scan window over a qrcode and it will then discover it (hopefully). Also problematic is the fact that you first need to move the main 1p window off to the side since when you click on the scanning window to move it, it gives focus to not only the scan window, but the 1p main window as well. So normally the 1p window would then obscure any website window you were trying to scan. This makes for a tricky three window(1p, 1p scanner, website tab) re-arrangement/resizing exercise.
Happy to provide more info.
Glenn
0 -
PS, the ability to surface and find existing OTP entries is very important. I will often fill a uname and pass with 1p and then a new page will come up and require me to enter the OTP. I should be able to click on the 1p button in the browser bar and have a way to single click to fill the current OTP (instead of the current uname/pass), or have a single click way to see all my OTP pass entries in 1p so that I can then quickly fill with the right one. I'd like to do this without leaving the browser, but in mobile its especially important to surface a way to quickly get at OTP codes. A prominent OTP icon with a list of all OTP current codes and their countdown timers for example. OTP codes should require no more effort to get quickly than a uname/pass in 1p.
0 -
Thanks for the explanation, @grempe. I've filed two bugs as a result of this. OPM-2992 to specifically go and test GMail's TOTP QR code with our scanner to make sure that works right, and OPM-2993 to improve the interactions between the main app window, and the scanner window so that you don't need to do that little dance moving windows around.
Quickly finding items with OTP fields and filling of OTP values in browsers are already well represented in our bug tracker.
Regarding dragging/dropping vs hovering... it shouldn't matter. It's constantly scanning (every 0.25 seconds if I remember correctly) looking for a QR code under that window, whether you're currently dragging it or not. The image processing part of it is a bit of black magic though, so there may be cases where nudging something over a few pixels might make it work where it didn't before. I dislike the fact that the UI feels like magic though. You don't really know when it's scanning. I think I'd prefer an explicit button on the scanner window that you would click and then you'd know it scanned and either we found something and we can tell you we found something, or we didn't and you can decide how best to move forward from there.
Thanks
Rick
ref: OPM-2992, OPM-2993
0 -
Thanks for the follow up. I look forward to seeing the improvements. Just a thought, you might take an approach something like the Skitch app does. Click a button to start a 'scan' which hides away the 1p window (clearing the screen so you can see a QR that might be under it) and brings up a selection rectangle that you could then click and drag around a QR code in any app window (like skitch does for screen grabs). Or have an alternative method that lets you just click on a QR code and let the software figure out the edges and scan it.
I had no luck with dropping the current scan window when I was trying it out. The drag and hover (never releasing the click) seemed to be the thing that worked.
Best of luck.
0 -
Hi @grempe,
Rick has been corresponding with your regarding many of your points but I just wanted to add something that might help a little with something you mentioned earlier.
As you know, adding a OTP in 1Password for iOS is a more intuitive design. One aspect of adding OTPs via 1Password for iOS is the field is always labelled as
One-Time Password. If you follow that trend when you create any OTPs via your Mac it will allow you to create a Smart Folder that will show you all of your 2FA enabled Logins.- Create a new Smart Folder using File > New Smart Folder.
- Change the Title option to Any field name.
- Change the begins with option to is.
- Set the text box to
One-Time Password - Save.
This will filter your vault based on the existence of a field titled
One-Time Passwordbeing present. Hopefully that will help that one small aspect while we work on the rest.0 -
Thanks @littlebobbytables That is not a bad idea. You might suggest making that convention change in your video guide as well since they recommended 'OTP'. I would suggest though that it doesn't really address the UI issue completely. Having that filter would let me see (I imagine) a list of 1p entries that contain a OTP. I would then need to drill down into one of those to find the current OTP I am trying to fill in. So at best this is three or four taps/clicks. What would be best is to figure out a way to surface those OTP without need for clicks into a hierarchy. If you think about the UX for Google Authenticator or Authy as examples all I have to do is start the app to see my current OTP values. Perhaps 1p can display these as a list in the menu bar widget on OS X (with click to copy) that always displays the current OTP value, and time remaining for each item in the list (See the Authy companion app for OS X which has the right idea but is poorly implemented and unreliable since it depends on a Bluetooth connection to your iPhone to get at the OTP data that is stored there, 1p has solved this issue by having the data synced to OS X)? And on iOS maybe a similar OTP screen can be surfaced (optionally?) as the front screen of the iOS app? This approach really will remove a lot of the friction to using OTP every day (which is different than the friction currently present to add new OTP entries that we also talked about).
Cheers, and I hope these comments are helpful. I am a developer as well so I know I like to get this type of feedback.
0 -
Hi @grempe,
Can I just ask, are we talking about for logging into a page in your browser or to cover other scenarios that maybe we haven't thought of?
I ask as improving the filling to include the one-time password is something we want to do. Having the information there and needing the user to copy and paste doesn't fit in with the experience we're trying to achieve so it's very much on our to-do list. What I wouldn't want to do is make the assumption that this would meet your requirements if your needs are non-browser related in some way. I'm not a big TOTP user myself yet so I like to ask to ensure I fully understand your usage scenarios.
ref: OPX-758
We are kicking around the idea of how to make certain pieces of readily used data more accessible on iOS devices too but it's also about how to do so securely. That one I suspect will be debated quite a bit to ensure we don't put anybody at risk but they are talking about it.
ref: OPI-2239
0 -
Yes, in my experience all use of OTP is in a browser. It is usually on a secondary page after entering uname/pass on a primary login page. However I have seen some sites that use a combination of a PIN/Password with the OTP (e.g. USAA Bank, but unfortunately they use Symantec VIP OTP, a standalone iOS app, which is not the same as the RFC compliant OTP that every other site I use demands).
So I would, at a minimum, desire to be able to enter my TOTP on that secondary page, using the same 1p button in my browser (or in a very quick to find place on iOS), which would use the same 'brain' to determine which site I am on, and 'know' that what I want to auto-paste is not my uname and pass but the OTP. If it can't 'know' this then I would want the drop down in the 1p button for that site to always show the OTP and let me click on it to fill the field on the page with that current OTP. It is important that the display of the OTP ALWAYS show the remaining time (in seconds preferably) before that OTP expires. The countdown circle is good, but could be made better by having the seconds displayed in the center of the countdown circle.
This click to fill OTP should be NO MORE than two clicks away at all times IMHO.
Regarding making some bits of data more accessible on iOS. I am all for it. I think there is little risk when it is behind the master pass or touch ID barrier. I think that displaying an openly visible list of current OTP's presents little security risk since it is ephemeral in nature and requires additional info (uname and pass) which are not shown in the same context. You would need to not only know a users uname/pass, but you would need to see over the shoulder of a user when that screen was active to use the OTP (within the next 60 seconds or less).
Cheers.
Glenn
0 -
PS, I took your advice to add a smart folder on my OS X 1P, I added it for both 'OTP' and 'One-Time Password' though to encompass both usages that I had (which I then cleaned up to be just the latter).
However, sadly these smart folders don't sync to the iOS 1P so I have no way (that I know of) to see a list of logins that use OTP on iOS so this solution is only partly useful.
0 -
Hi @grempe,
Thanks so much for all your feedback about the TOTP feature in 1Password! As you know, it's a new feature in the Mac version, and there are some improvements that can be made. Our developers are working on that, and your input definitely helps! :)
As for smart folders, you're correct that they aren't currently supported in 1Password for iOS. I don't know when that will be added to the iOS app, but in the meantime, a workaround would be to add a tag to your Login items with a TOTP field, so you can easily find them all in one place. In 1Password on your Mac, just edit one of the TOTP logins to add a tag, then you can easily drag the rest of your TOTP logins to the new tag in the sidebar. They'll all show up together in the Organize section of 1Password for iOS. It's an extra step to do this each time you create a new Login item with a TOTP of course, but I thought it might be a helpful tip.
If you need anything else, please let us know!
ref: OPI-370
ref: OPI-2064
ref: OPM-28740
