Progressive Interface / Experience [PIE 🥧] Design

[nelsonic]

We are so used to terrible interface / experience design that we no longer see it. 🙈 But it's everywhere, both in the real world and especially in the world of Apps! 😢 e.g: https://uxplanet.org/9-bad-uxes-in-good-products-73be5418a4c1

The interface of an App is especially important for the person viewing it for the first time. This is referred to as onboarding.

Going to try explain what I mean by "Progressive Interface / Experience Design" with a few examples. Let's start by examining our MVP: github.com/dwyl/mvp as it currently stands: mvp.fly.dev

Superficially there isn't that much going on this page; there are only a handful of components. 💭 But if we actually observe it with a beginner's mind 初心, 🔰 it becomes immediately apparent that there is waaaaaay too much stuff on this page! 😖 it's confusing / off-putting ...

1. Hi Friend! - This is a friendly greeting, but it detracts/distracts from the main objective of App. We should hide it until the person has performed their first action in the App, i.e. they have typed something into the <textarea>. 📝
2. dwyl logo - anyone who doesn't already know the logo doesn't care about it, it's a distraction. ✂️
3. Login button - this is relevant to existing an person but not really to a first-time viewer, at least not in the first 2 seconds of them viewing the page. The person viewing this page for the first time has Only One Job: input text.
4. tags - displaying the tags field on initial page load is a distraction. A new person will scratch their head and ask: What is this? We don't want them to ever have to pause to think. 🏷️ ⏸️ 💭 🤷‍♀️
5. save button - if there is no item.text in the <textarea> there's nothing to save. The button is a distraction. It should only be displayed once the person has typed more than one word of text.
6. <footer> nav/buttons - These are an immediate distraction to the new person. None of these navigation buttons need to be visible if there are no items. 👎

This is what the App should look like:

It's deliberately barebones interface that is immediately obvious to someone viewing it for the first time.

After 1 second, we can fade-in the Login button and display a helpful message in the Top Nav:

Fading-in the Login button is a gentle way to encourage people to Login and displaying the helpful greeting and suggestion is contextual.

Ideally we can display the Login button after T1s to let existing people login. But then only display the "Hi Friend ..." prompt after they have typed something into the <textarea>

Gotta go be a parent for a couple of hours ... BRB!

[nelsonic]

https://mediatemple.net/blog/design-creative/what-super-mario-taught-us-about-ux/

[nelsonic]

Busy updating the Figma design/layout to include the smallest increments in interface/experience and micro-interactions: https://www.figma.com/file/WrpkKGJNYZbeCzMRDVtvQLbC/dwyl-app?node-id=0%3A1&t=X4yRwHttNxORAxyP-1

My goal is to define the first 30 interactions/screens in the interaction of the MVP App. You're welcome to follow along if you like.

[nelsonic]

Prepared the first 12 screens: 📱

Will continue with this tomorrow morning. 👨‍💻

[nelsonic]

Why do we have a save button?

[seaneady]

How do we know when the user has finished typing?

[nelsonic]

Good question. There are event listeners that allow us to detect when a key is pressed. If no key is pressed for say 3 seconds and the text in the <textarea> is more than 20 chars (so not just “blah” or “asdfgh” - uncreative test input) then show the “Save” <button>.

[nelsonic]

3 more screens:

[seaneady]

I'm still getting an internal server error. Anyone else getting the same?

[nelsonic]

@seaneady please open an issue in the main MVP repo with this bug report this is a “P1” that needs to be investigated with the highest priority. We can do a Zoom-pairing session if you want to watch the process, it’s a very good thing to understand a bug-fix from start to finish. Thanks.

[seaneady]

Done on the above. I would definitely be interested in watching the fix over zoom, thanks for the suggestion.

[nelsonic]

This is what I think would make a good Tagging UI/UX:

Direct link to Figma page: https://www.figma.com/file/WrpkKGJNYZbeCzMRDVtvQLbC/dwyl-app?node-id=246%3A2

@seaneady as the person with the freshest eyes on the project and your UX-focussed learning, do you want to go through this UI/UX tomorrow after our Standup Zoom Call? 💭

Obvs everyone else is invited/encouraged to provide feedback. 🙏

[seaneady]

@nelsonic I would definitely like to go over this with you after standup. I'm taking a look at Figma now and taking notes.

[nelsonic]

@seaneady thanks very much for your feedback on the Figma doc both in issues and on our Zoom call. 🙏 And thanks for helping me to respond to: https://github.com/dwyl/app/issues/299 with your Android expertise. 👌

[seaneady]

Only a pleasure @nelsonic.

[nelsonic]

Keen to work on the auth screens/UX next ... Anyone have any preference for what they want to see next in terms of Figma wireframes?

[nelsonic]

"Don't focus on features, focus on how people learn." ~ Alan Kay