Developers and founders building SaaS apps, how do you approach UX/UI problems?
Hello hackers, bootstrappers, and founders!
I'm building a collection of UX/UI Best Practices. MINIMUM VIABLE DESIGN$ https://minimumviabledesigns.com
I've shared this resource already here and on subreddits. In one week I got 2k visits in the first week. I felt like I found a water in a desert for a while. But I try to focus on the value I bring to the table rather than likes/visits :-)
I wonder if this is the right format, that is practical and help you to simplify your life. Can you imagine using these listed tips as a checklist? What do you miss here to get it to the next level of practical application for real-life problems?
Any point of view much appreciated!
The website is cool! I would include screenshots of sites that implement the tips to make the advice more concrete.
Since the name is geared for MVP products, you should give more tips on how to improve the design of starting products. It's easy to add social proof to the sign up page when you have 100k users but what are the ways to add proof before that?
fake it till you make it. I'm JK :P
Big true to that! Social proof at the beginning of validation your product is a bit tricky to express. I have an idea, so the #7 needs to be revisited :-)
I did a mvp ui on my SaaS. For two reasons. ( 1 ) The best designers get it wrong 50% of the time. Due to not having six months feedback from customers. ( 2 ) With my users they are 45-65 year olds and they need simplistic, with no milenium inspired designs. Realize you will build a UI and soon after launch you will build the next version, anyways. As far as your best practices, does one size fit all?
What do you mean by MVC UI? I recognize the abbreviation as a Model-View-Controller pattern.
Yep, excuse my typo " MVP" is what meant to say.
Regarding the "one size fit all"question, I would say that designing for users from the aforementioned age interval requires extra effort to keep things simpler and using higher font-sizes. Their capacity to comprehend new knowledge is every decade with their age lower.
I wouldn't exclude any of the best practice listed for your case. As you can see I usually provide tips for layout, navigation and color management. Not the visual styling for a new age of media consumers.
What are the specific problems you have with your MVP design? Or questions you would have to research the answer for.
User feedback is the only way to get it right. You start somewhere with a MVP design, and collect feed back. Older folks are not big web users in general. Most of their online activity is email. In the last few years they spend time on facebook. So new design trends are counter productive. They expect, text and links, not so much icons. Anything non-textual is often misunderstood. If you don't use a back navigation in most places, they will use the browser back button, which is bad. Other than using mouseflow to watch them, i code events on many features and rate behavior using keen.io.
Thanks for sharing this! The facebook trend is true and in fact it teach them how to use web apps in a certain way.
This could be a very helpful blogpost from your side :-)
Cool site! As a dev figuring out the ux is a pain and pretty time consuming.
Can you please clarify the difference between items 1 and 6? It seems 1 is saying to put all navigation on a left pane while 6 is saying to split it between left pane and main pane.
Does the advice hold for both mobile and desktop? Or should some things be done differently?
Agree the #1 need a clarification as I recently noticed that it is not that straightforward. Thank you, this is helpful.
I have to say I focus mainly on the desktop versions, which I think is a primary interaction platform for majority of the starting businesses. What are your thoughts?
I usually start by building the mobile version because it's easier to go mobile -> desktop rather than the other way around. Creating UI and UX that fits both mobile and desktop is definitely a pain point. It would be really really useful if the desktop designs in you page also had an image for what it should look like on mobile :)
True to mobile first approach. What kind of SaaS are you working on, so the users will need access from mobile?
I think explaining responsive patterns would introduce another level of complexity. Brad frost the guy behind the atomic styleguide had a library of responsive patterns: http://bradfrost.github.io/this-is-responsive/
I hope this will be helpful to you.
Ezytor is a simple, easy, and powerful website editor with all the elements you need to create a stunning website in just a few minutes.
Here: Ezytor.com
Hi Viktor, that's a pretty neat idea to attract traffic and bootstrap your digital products!
I'm also a UX Developer for a couple of years now and I started some some projects like these to convert users into buying my products as well (maybe we can partner up on some dribbble.com/adrianshp)
I do have some really quick tips on improving conversion
I'll edit along if I notice more improvements to be added
Thanks! Shopify guides are a great resource for teaching others. Thanks to you I also realized that the design of my website is not really speaking to the target audience. Just by comparison to devias.io
Examples yes, agree completely. Plus the format of the explanation.
Glad I helped out! 😇
This is a great resource that you're putting together! I tend to refer to these as "patterns" in the sense that Christopher Alexander used in his book on architecture, "A Pattern Language". You might consider checking it out for some inspiration for a project of this type. Basically he does what you're doing, but for all the different parts of the built environment.
I'm a UX developer who is building a SAAS product right now, so I'm trying to think how I might utilize a resource like this. Seems like it would be great to have a quick reference that I can jump to on any given part of the UX or UI I'm working on. Checklists would be great!
As for layout, it might be nice if I could expand/collapse the text of each section as I got to it and wanted to read it, instead of having to scroll through everything. But that's not a major inconvenience.
Also, the full width sticky header really constrains the viewable area on my small laptop. I would consider either not making it sticky or using only a small sticky container off to one side.
I think you're off to a great start!
Thanks for a thorough and encouraging feedback Scott!
I like your approach with searching abstract patterns. Ryan Singer, responsible for Product Strategy @ Basecamp referred this book as high-quality one.
Sticky header - fixed.
Layout - as the library will expand I would switch to master-detail view so it's easy to navigate between patterns.
Good luck with your SaaS product!
I love this kind of content.
We try to see how people use our tool, and follow some basic principles.
I also never think I know how my user are going to use my app. So I always try to keep things simple and accessible.
Thank you Alix!
This comment was deleted 8 years ago
This comment was deleted 6 years ago
Yes. I admit, I've been inspired by their work for how they present the UI hacks. Didn't know about this web, I was only aware of their viral article. They do a great job explaining UI details. I will aim to be a complementary element to their material. Thanks for sharing this!
What exactly do you mean by "scroll jacking"? :-)
This comment was deleted 6 years ago
Strange, I didn't notice that. I switched the platform today so it might be fixed :o