Design
bkeepers opened this issue · 20 comments
I've got some code started (not all pushed at the moment), but step one is getting a workable design. I spent some time today working on a mockup. It's far from perfect, and still more to do (especially in the right pane), but it's a start.
The look is great. I love the idea of having an access log in there. On a shared vault, are you thinking there will be a list view of users that have access?
Yeah, haven't quite thought about how the vault settings stuff will work yet. I'll work on that today.
I made a few tweaks, but going to wait for @mattgraham to give it his magical touch.
I think this app has huge promise for teams or clients/consultants, but please don't mimic the 1Password UI — specifically the right pane. I understand this is stab one, but here's my wish list for consideration.
- The only things that matter are (service, username, password). Make them huge and obvious.
- I don't care about access logs 99% of the time. I just want the current password. Minimize that thing and leave it compacted by default.
- Don't use an edit button. Do it inline on the element (click+type).
- Make a big "Login to This" button somewhere prominent (top right).
- Give me the option to not obscure passwords.
@brendanf thanks for sharing your thoughts.
The only things that matter are (service, username, password). Make them huge and obvious.
100% agree
I don't care about access logs 99% of the time. I just want the current password. Minimize that thing and leave it compacted by default.
Yep, access log will be tucked away somewhere. Honestly, I didn't work on styling it at all when I made the screenshot. I just wanted to include an interesting feature that a group-optimized app could include.
Don't use an edit button. Do it inline on the element (click+type).
I'm cool with that.
Make a big "Login to This" button somewhere prominent (top right).
I can probably do that if you have the browser extension installed. But without it, probably won't be able to automatically sign you in.
Give me the option to not obscure passwords.
You mean you want the password to be shown in plain text in the UI? Why?
Great feedback.
- Cool.
- Makes sense, figured this was the case.
- Cool.
- Login Button — I suppose some apps won't take GET requests for logins. I'd be fine with this feature not existing. The real power is sharing passwords securely with others.
- Plain Text Passwords — This is actually a 1Password gripe of mine. To see a password I have to click "edit" then click "password" field. I work in a safe environment. If I've authenticated the app, I don't need the extra click-hassle to de-obscure them. I wish the option to disable it was there.
The only things that matter are (service, username, password). Make them huge and obvious.
Totally agree with making the main things the main things.
Don't use an edit button. Do it inline on the element (click+type).
For several reasons I'm not in agreement with the click+type concept without first using an edit button. As nice as it would be we want to display only the important, completed text fields in the right pannel. I do not want to display every empty input field. Not to use the "other guy" as the reference but:
Displayed minimalisticly with the main things:
After Edit Button:
We obviously are not looking to mimic 1password and will have our own UI however, the concept of showing all fields at all times, is one that I'm not in agreement with. Make sesnse?
Make a big "Login to This" button somewhere prominent (top right).
Absolutely the goal is to totally make this as quick and easy to use. There are many times 1password is more work than it needs to be.
Maybe I misunderstood the app partially. I was under the impression this was "shared sensitive info with your team in a central place" and not "login to XYZ like 1Password from a shared repo of sensitive data".
I wasn't really considering you'd have all the extra (junk) fields stored to submit the form. I've never edited them manually anyway. If the web form changes it's just easier to delete the whole record and login to the service while re-saving a new record.
I'd still prefer a simple click/edit UI. One thing I do like in 1Password is click/copy, so I'd actually prefer both actions — maybe with one (copy) moved to an adjacent button displayed in the "fields" area. This would still leave your left hand on the keyboard for CMD+A+C if you clicked directly on the field.
And apologies for continually referencing 1Password, but it's the de facto password management app so it's hard to compare UX without an alpha product. I'm looking forward to seeing what you come up with.
@brendanf no worries. We're actually all 1Password users ourselves and its a great app from a great group of people. We just believe there are somethings it does not do and that we can do better. Our all will be geared for teams of people to share logins etc. however, we want to build an app that makes storing such information regardless if its for yourself, your family or your organization, quick, easy and secure.
Keep dropping in the feedback, we're used to bashing around the ideas until we come out with the complete project. Its always better with many brilliant minds.
With our powers combined
👍 Almost everywhere I've worked has needed a better solution to shared passwords. This shows great promise.
A hierarchical view (folder [ -> SubFolder ] -> Item) could be useful to sort the items or maybe adding the ability to tag the items.
Ok so I had a bit of a stab at creating a more distinct visual style for the app based on the existing mockup and screenshots.
It’s deliberately very simple (mostly text-centric, no favicons etc), so that the focus can stay on getting the core functionality of the application solid without having to worry about too many small details early on.
I also was thinking a bit about how the workflow might work for actually using this on a daily basis, and one thing that I thought would be really need to have is like a launcher-style quick search page that lets you quickly find the item you want and press enter to go there and sign in. Here’s a mockup of that:
The launcher screen could probably also be made to fit within a browser extension window/pane too, which might help on that side of things too.
I’d love to hear any feedback people have!
heya,
Hmm, @cobyism your design kind of reminds me of the Holo theme in Android - it's nice =).
However, I tend to prefer @bkeepers original faux-wooden background theme - this is just a personal preference, so I'm speaking just for myself. It seems a bit more distinctive, and elements stand out from each other more.
Cheers,
Victor
I like the direction of the @cobyism's design. It feel somewhat metro-ish, which I can get behind.
I would love to see the main content area simplified. It feels busy and hard to scan.
Also, here's a mockup that @mattgraham started working on a few months ago.
I'm liking both designs @mattgraham and @cobyism, it's hard to pick one over the over! I think the logo should be something like http://d3c0d3r.files.wordpress.com/2009/12/swordfish01.jpg though 💻💻💻💻💻💻💻
Glad you like them! At the end of the day though these are all just initial stabs at visual directions while the underlying functionality is still solidifying—really it’s going to be a case of iterating over the design in pull requests just like everything else, rather than picking one design over another. I know @orderedlist was hacking on some design concepts for this too, so I’m sure that between the people who are thinking about this already, and those that will jump in to help out in the future there’ll be stacks of input design-wise to make sure this app is ✨
The design is moving in good directions. @cobyism and @mattgraham both have great starts. Let's close this issue for now and someone can open up a pull request when we get something real in progress.
Thanks for the feedback gents. ( @tombell @victorhooi ) its been tough to keep up on design for swordfish with so much going on but I'm confident as this gets closer to completion it will look amazing. Many great design hands in on this project.