search

fossasia / susi_android

SUSI.AI Android App https://play.google.com/apps/testing/ai.susi
Apache License 2.0
2.42k stars 1.11k forks source link

Add intro screens #894

Closed chiragw15 closed 7 years ago

chiragw15 commented 7 years ago

Add intro screens when an app is installed for the first time. They will include:

  1. Displaying Skills.
  2. Quick Info about Speech input/output.
  3. Hotword and Hotword Training.
  4. Login/Signup
Arshilgenius commented 7 years ago

@chiragw15 I want to work on this, Can i ?

chiragw15 commented 7 years ago

@Arshilgenius work with @mishraanmol on this and divide the work. You may divide two screens each.

Arshilgenius commented 7 years ago

@chiragw15 okay, thanks a lot 👍

anmol27katyani commented 7 years ago

@chiragw15 Ok

Arshilgenius commented 7 years ago

Is this design good? It's from my previous app, and can i add code in java or convert it into kotlin?

chiragw15 commented 7 years ago

@Arshilgenius These look better to me. Also, you can add code in java.

.

.

.

Arshilgenius commented 7 years ago

How does this look? Sorry for being late..

chiragw15 commented 7 years ago
  1. Make it full screen.
  2. The line below cuts the mobile frame. Instead, shift the mobile frame a little above.
Arshilgenius commented 7 years ago

Full screen like this?

chiragw15 commented 7 years ago

No. Reduce the size of mobile frame and remove status bar like the screenshots I added in my above comment.

Arshilgenius commented 7 years ago

How is this now?

chiragw15 commented 7 years ago

  1. In this

    reduce size of mobile frame like this

    and keep "Login" written on the top.

  2. Change the color of the circle indicators from red to white like this

  3. And remove status bar like this

Arshilgenius commented 7 years ago

@chiragw15 How is this now?

chiragw15 commented 7 years ago

@Arshilgenius Remove status bar please (ref https://developer.android.com/training/system-ui/status.html) Use full screen theme.

Arshilgenius commented 7 years ago

How is this now? I am really sorry i thought you meant something else by status bar.

OR

chiragw15 commented 7 years ago

Second one with white circle indicators instead of red. Also, add a line describing the screenshot/feature under the mobile frame.

Arshilgenius commented 7 years ago

@chiragw15 : Can you tell me which all screens should i add and what should be the describing line for each screens ( i am not that good in english ) and what more needs to be done in this layout?

chiragw15 commented 7 years ago

  1. In the above screenshot, just decrease the size of the the line written below the mobile frame and replace it with "Login into SUSI AI using your account for better customization. If you don't have an account, just click on the sign up option and create one. Or else you can simply skip the whole process and jump into the chat interface".

  2. Add another screen about main chat interface defining how to interact with SUSI. Write "Interact with SUSI AI by just entering the query in the given input box and SUSI will response to your queries. Click on the microphone button to give voice input to SUSI"

  3. Third would be about skill Listing. Add screenshot for it. Write "SUSI AI has many skills. Browse through all the skills and try your favorite one on the chat interface".

Leave the fourth one. It will be on hotword detection. I'll add that later.

Arshilgenius commented 7 years ago

@chiragw15 What else needs to be done?

chiragw15 commented 7 years ago
  1. In second screen, change title "Interface" to "Chat Interface".
  2. Change the screenshot in second screen to something similar to the one used in third screen which has some messages in it. Also, update the code and use new screenshots. The settings icon in the FAB is replaced.
  3. For the screenshot in third screen, use
  4. For the 4th screen, remove Hotword Detection for now. Will add that later. For now make it "Chat Settings" and use screenshot of settings fragment. For description, use: "You can personalize you experience with Chat Settings. You can select language of interaction, change password, switch on/off voice input and output etc"
chashmeetsingh commented 7 years ago

@chiragw15 IMO such long descriptions shouldn't be present in the intro screens.

Arshilgenius commented 7 years ago

@chiragw15 @chashmeetsingh what else needs to be done?

chiragw15 commented 7 years ago

Looks good to me. @chashmeetsingh Your views?

chashmeetsingh commented 7 years ago

I suppose the descriptions can be shorter like for the skill listing it can simply be Browse and try your favorite skill or maybe something similar. What do you think @chiragw15 ? Design wise it looks good.

chiragw15 commented 7 years ago

Okay. Concise the description a bit. Maybe: Login : Login into the app using SUSI AI account or else signup to create new account or just skip login. Chat interface : Interact with SUSI AI asking queries. Use microphone button for voice interaction. Skill listing : Browse and try your favorite SUSI AI Skill Chat settings: Personalize your chat settings for better experience.

Arshilgenius commented 7 years ago

@chiragw15 @chashmeetsingh : How does it look now?

chashmeetsingh commented 7 years ago

Looks good to me, just remove the ! from Login!.

chiragw15 commented 7 years ago

@Arshilgenius Good work. Please send a PR. Thanks.