s3687636 commented 4 years ago

basic and simple UI that friendly to target users. @LcNguyn

LcNguyn commented 4 years ago

Here are the Balsamiq Mockups. These are basic layouts created in order for our team to have clearer views of our app as well as starting our frontend coding.

Note: Quiz and Profile/Rewards mockup will be added soon. Our app logo is being designed, going to show you guys soon ^^ Main Explore Book

LcNguyn commented 4 years ago

P/s: Explore: Representative Image based on each word will be added to mock up later.

s3687636 commented 4 years ago

you can build on react-native components for them now. note: must be components for react-native to be rendered. you can use dummy data for now (const json object).

LcNguyn commented 4 years ago

you can build on react-native components for them now. note: must be components for react-native to be rendered. you can use dummy data for now (const json object).

this is just some mockup :)) the UI needs more than this so I think I need more time to complete all of the UI. I think it would be more convenient if you can add the buttons relevant to the functionality you are testing so that I won't have to do that again. Or I can try to do it simultaneously with my tasks. :))) what do u think?

trungduong0103 commented 4 years ago

Some comments on the UI mockups: Is our first screen the main screen ? when we first open our application we will see this screen right ? No log in no sign up. If this is the case, I don't think we should put our logo here, it's entirely redundant. Moreover, the main screen has 5 list items, I don't think that's a good design. My opinion is to put two big icons that has a floating effect over the main screen. The first icon is a compass, that represent the Explore screen, the second one is the open book, represents the view screen. Quiz can also be added under those two icons but not preferred. Lastly, Me and Settings should be put as a bottom navigation, showing all options in one huge chunk looks cluttered. Just my idea.

trungduong0103 commented 4 years ago

Some comments on the UI mockups: Is our first screen the main screen ? when we first open our application we will see this screen right ? No log in no sign up. If this is the case, I don't think we should put our logo here, it's entirely redundant. Moreover, the main screen has 5 list items, I don't think that's a good design. My opinion is to put two big icons that has a floating effect over the main screen. The first icon is a compass, that represent the Explore screen, the second one is the open book, represents the view screen. Quiz can also be added under those two icons but not preferred. Lastly, Me and Settings should be put as a bottom navigation, showing all options in one huge chunk looks cluttered. Just my idea.

@LcNguyn ideas ?

trungduong0103 commented 4 years ago

LcNguyn commented 4 years ago

Some comments on the UI mockups: Is our first screen the main screen ? when we first open our application we will see this screen right ? No log in no sign up. If this is the case, I don't think we should put our logo here, it's entirely redundant. Moreover, the main screen has 5 list items, I don't think that's a good design. My opinion is to put two big icons that has a floating effect over the main screen. The first icon is a compass, that represent the Explore screen, the second one is the open book, represents the view screen. Quiz can also be added under those two icons but not preferred. Lastly, Me and Settings should be put as a bottom navigation, showing all options in one huge chunk looks cluttered. Just my idea.

Logo position: Agree. I am considering putting it at the loading screen when the user starts the app.

Menu layout: I have considered doing that at first since it's our team's first imagination. However, the problem is the layout design. The screen will have lots of blank spaces which we need to design a super interesting background behind in order to get rid of users' boredom which is quite risky. So I think it's better to keep this menu (menu inspired by https://www.pinterest.com/pin/238690848988217830/ ) Btw, I have reduced the number of list items from 5 to 4 (might be reduced to 3). I have put the Setting item inside Me item since I got the idea from some IOS app.

thienhieu215 commented 4 years ago

I agree with Trung about the layout of home screen. However, the profile and setting buttons can be changed to icons and put them at the corners. The only way to access the history screen is to go to the explore camera screen first then click that button at the top corner, am I right?

LcNguyn commented 4 years ago

We are trying to reduce the icons (that are not labeled) as much as we can. So we cannot use to much icon. Everything must be clear and understandable as much as possible

Nguyen Tuan Loc

On Mar 26, 2020, at 01:13, thienhieu215 notifications@github.com wrote:

I agree with Trung about the layout of home screen. However, the profile and setting buttons can be changed to icons and put them at the corners. The only way to access the history screen is to go to the explore camera screen first then click that button at the top corner, am I right?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

thienhieu215 commented 4 years ago

I think the setting and profile icons are simple and easy to understand. How about the history screen I mentioned above?

trungduong0103 commented 4 years ago

looks good to me

s3687636 commented 4 years ago

ok, let implement those skeleton first

s3687636 commented 4 years ago

39

LcNguyn commented 4 years ago

Here are types of question mockups:

1. Multiple choices 1

Multi 1

2. Multiple choices 2

Multi 2

3. Type

Types

4. Pairs

Pairs

LcNguyn commented 4 years ago

Besides, there are some questions we need to discuss on our next meeting:

We haven't discussed keeping/removing voice recognition speech to text questions yet. So should we include them in?
The pairs type question has not been completed since there are different approaches. Which one you think is better.
How to show correct answers in the Pairs-type question? Since there are lots of pairs. Which approach can eliminate effects but still give us a good outcome?

trungduong0103 commented 4 years ago

Issue is open for reference

trungduong0103 commented 4 years ago

pinned for reference

LcNguyn commented 4 years ago

Updated: Main Menu, Explore and Book screen version 2 after receiving the feedback:

1. Main Screen Minimalized the number of items, logo erased, less boring Main-V2

2. Explore There are the relevant image attached to each word, audio more visible, buttons less boring Explore-V2

3. Book Images are shown in the list to attract the kids, words only might bore users. Book-V2

LcNguyn commented 4 years ago

Main Screen First Sketch Note:

The screen is still in development phrases since there are some obstacles during my progress. However, suggestions and feedbacks are all welcomed ^^
The color might need to be brighter. Do you guys think it is boring for the children?
As you guys can see, the pattern in each of the 3 buttons should be objects related to the topic. Because there are still works that should be done for the app theme, I am not able to complete those images yet so I did not attach it to the screen.
The top section still needs a mascot to fill in the left space
And the main screen is planned to have motion, hover too

Artboard 2

trungduong0103 commented 4 years ago

looks great to me, but I think we can add our spirit animal here

trungduong0103 commented 4 years ago

great work btw

LcNguyn commented 4 years ago

Main Screen v1.2: Note: It is more completed. However, the mascot has not been done yet since the drawings arent fit in the screen UIMain-V2

Icons for Lesson's Level: Note: This is just icons for 3 levels at first stage. This is not the completed layout yet since it should be developed more from feedback and improvement by days UILesson_V1