dwyl / learn-flutter

🦋 Learn how to use Flutter to Build Cross-platform Native Mobile Apps
https://flutter.dev
GNU General Public License v2.0
73 stars 8 forks source link

Splash Screen Page #26

Closed miguelmartins17 closed 4 years ago

miguelmartins17 commented 4 years ago

What do you think about starting the application with a splash screen with the dwyl logo followed by the login ?

miguelmartins17 commented 4 years ago

Can I use Figma to make the design? 💭

nelsonic commented 4 years ago

Good question. Splash screens are typically only used in Apps that take a long time to load. You will find them a lot on games or other "heavy" apps that need to load an "engine" into memory before the user can interact with the interface. In our case we want to eliminate any delay between the person typing https://dwyl.com being able to interact with our Application; never waste anyone's time.

On your phone, try opening the Calculator, Clock, SMS messaging app or another "utility" App. They all open immediately without any delay or "splash" screen. We consider our App to be a "utility" that people will reach for like a calculator. If they need to think or remember something, they will open our App automatically.

If for some reason we were unable to make our App load faster, we could consider using a Splash screen. e.g: the @dwyl Logo and a variant of the mission.

But our main focus should be making the "capture" screen load as fast as possible. The splash screen does not add much value to the end user, it's just an annoying delay. ⏳

miguelmartins17 commented 4 years ago

@nelsonic So in terms of design what will be the first impression to give the user when opening the application? Will we start right away with the login page ?

nelsonic commented 4 years ago

Another good question. And the answer is "No". We don't want to force people to login before they can use the App. We want to remove any "obstacles" and just let them use the App as quickly as possible.

Login is only relevant once someone has already started using the App and they want to save their data (or load existing data). In the beginning 100% of people will not have any data saved in the App so having a Login Screen does not offer them any benefit/value.

People have become used to the Login "wall" in Apps/Services but it's not good UX. Great UX is allowing people to get started immediately and then a few minutes later prompt them to "save" their progress by logging in. At that point it's relevant to them because they have already seen the value of the App and they want to "save" their data so there is no doubt in their mind that they want to register/login. I've built many Apps where the "designer" insists on having login before the person can interact with the App and it's almost always a bad idea. (unless it's Banking or Healthcare where people expect it). A "utility" App should eliminate obstacles to interaction and focus on the core UX.

Obviously this requires a bit more work on our end because we need to proactively create an "Anonymous" person in order to associate the data they are inputting, but the benefit in terms of "onboarding experience" is worth it.

miguelmartins17 commented 4 years ago

I took some time to research what the homepage for an application should look like and what it should have. I found this site that talks about 5 questions that the homepage should answer.

I leave the link here: https://www.mockplus.com/blog/post/mobile-app-homepage-design

It might help us to make more progress.

nelsonic commented 4 years ago

When building the "onboarding" process in an App our objective is to minimise the number of steps between someone first discovering the App and being able to interact with it effectively.

When you first play a video game like Super Mario or Tetris there are no detailed instructions telling you how to play. There are design cues or clues which make it almost immediately obvious what you need to do:

image https://youtu.be/La2aGhZxLkQ

image

Without any text telling you what to do, you instantly know what to do in Super Mario. The onboarding UX of the game is so good that you don't even notice it. You just play! If our UI/UX is needs text instructions we have failed.


The link you have shared above is blog post on MockPlus, a mockup tool who are trying to sell you on using their tool. They have vested interest in perpetuating complexity as a justification to use their tool.

Question 5 in the blog post is "Do you use Mockplus?" this-is-an-advert

What has that got anything to do with homepage design? 🤷‍♂ You've just spent your time reading an Advert. Remember: "All ads lie!" The moment you notice that "content" is actually trying to sell you something you should immediately close it and not trust the source. It's "avertorial" not a real blog post from someone with experience of building Apps. Scroll down to the author of the post: summer-ye I mean no disrespect to Summer, but they are an "SEO content writing" i.e. they work in marketing. That is not someone who as actually built any apps with any level of success. They are "researching" and writing the post in order to generate clicks.

A Note on Mockup tools:

Mockup tools are not used to actually build the product, they are a way for self-indulgent "designers" to show off all the amazing features the product could have. But rather than being a good use of the team's time, over-complicated designs is a distraction from focussing on building what the users want. Having fancy designs/mockups is a "red flag" in a startup because it shows they are spending way too much time dreaming about potential features and nowhere near enough time building useful things! ALL the startups that fail (i.e. 95%) have amazing mockups/designs and no

Mockups = Vaporware

Mockups aren't real, they are a distraction from the real work that hasn't been done; writing code!

5 Questions ...

Let's dive a bit deeper into these "5 questions that the homepage should answer"; they aren't all bad.

Question 1: Who are you?

While I agree this is a nice question to have an answer to because it encourages transparency 🎉 but honestly when was the last time you thought to yourself: "I don't know Who WhatsApp is so I won't use the App"

This is not a question that very many people actually care about when deciding to use a product/App. Otherwise they would have taken a moment to think about Who is behind Facebook and immediately delete the App!

Question 2: What can you do?

This is probably the most relevant question in the post. But right under the question I am subjected to an obnoxious advert!!

annoying-advert

Back to the question though ... What an App can do for you should have already been obvious from what you searched for. Let's say you went searching for an App to keep track of your "lifts" in the gym. What would you search for? "Gym tracking". And in the search results you see: image Do any of these apps still need to explain what they can do for you? No! You open the App and start using it.

It must be the same for our App. It must be immediately obvious what can be done with the App. Otherwise our UX has failed.

Question 3: What information can you provide?

Totally irrelevant to our App. We are not providing any "information". We are providing a way for people to organise their lives and be more effective with their time.

Question 4: How do you plan the layout?

Now we're back to pitching the Mockup tool ... 🤦‍♂ Of course an App plans the layout this is obvious and has nothing to do with "Home page design".

...

Finally question 5, as described above is just an Ad which invalidates the rest of the post.


Let's not get too distracted by Splash Screens ... there is a lot of other work to focus on.

Always remember:

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” ~ Antoine de Saint-Exupéry

If we don't need a splash page we will not make one.