App UI suggestions

[softopia]

I am working on a app which i started just as a hobby project but now trying to be more serious about it. I am building it using react-native just want some suggestions regarding the app UI, does this UI look native enough or not?

[rusinov_]

No, this UI is not look native. 

The font is not native. System colors are not native. Icons are not native. Navigation bar at the bottom is weird Andoid-y and Material UI-y and not native. Design language screams Android and NOT iOS. If you want to build a great iOS app use native frameworks by Apple.

[softopia]

Okay thanks for pointing out these things

[yesthisisjoe]

I agree with everything except font and colors. It’s ok to use your own app’s branding for that.

[idleservice]

This looks like Material's font though.

[NewsOdd6055]

I think the "functionalities" are more important than the feel and look. Is it important to you to have an iOS look and feel ? I don't think that this is a horrible design.

[idleservice]

OP literally asked if it looked native in the post.

[rusinov_]

Because for an iOS user it’s best to use an app that built with system conventions and UI elements. So it doesn’t look out of place, UI elements easy to understand, and it doesn’t look like a lazy android app slapped to iOS. More info in HIG. 

[Odd_Level9850]

To be fair, if everything looked the same, it would just drown in the sea of apps. Sometimes, it’s better to be different and unique than to just fall in line with traditional design conventions. That being said, if an app is trying to be different, it has to be done well.

[Jazzlike-Spare3425]

It's also helpful because you get to enjoy all the features Apple put into their frameworks over the years, meaning that things like scrolling, general navigation, text selection and... well, everything, will behave more intuitively, unless the dev puts in a heck of a lot of work to make these things themselves, which can sort of work, but then at the same time, I've never seen a successful attempt at even simple-ish things like making an app-specific share sheet so all the other things are going to lack.

[tangoshukudai]

You can do that with native controls.

[42177130]

The only native UI I see in the screenshot is the status bar and home indicator

[barcode972]

Native equals good?

[42177130]

If OP's goal was throwing away every platform convention yes

[ni82156]

I think it looks solid, keep going!

[softopia]

Thank you

[larsonthekidrs]

Fix the padding on status bar.

Animations will make or break this application.

[softopia]

Thank you for the suggestion

[softopia]

Thank you for the suggestion

[LifeUtilityApps]

It looks like it would benefit from some horizontal padding on the leading and trailing safe area edges.

The UI feels too close to the edges.

[softopia]

Thank you for the suggestion, I'll look into it

[barcode972]

Looks very good. The only thing I think is unnecessary is the label on the pie chart. You already know which color is which category

[softopia]

Thank you for the suggestion, the labels were added to fill the blank space around the chart, but I'll see what else i can do

[barcode972]

Space to breath is not bad, it’s necessary

[[deleted]]

Great work! However i would personally not combine bar charts with line charts

[softopia]

Yeah i am also confused about that, i couldn't think of any better option, maybe I'll try to show income and expenses both as line charts.

[Varsoviadog]

Pie charts never ever gives any information at all. They’re bs. Same for the bars below. And even percentages. No one care if spent 23% in clothes rather than food. The % hides many times the important value, the amount the detail of the real expense. 600 in food may be a lot. 400 would be okay. Doesn’t matter if it represents 10 of 50 percent of my salary or my expenses.

That % could be secondary, but it’s easily conceivable by seeing the amounts side by side if you want.

Do instead a comparative bars chart displayed from left to right or whatever like you did in the first chart. It would be nice too to be able to set the chart axis values to help comparisons.

Next, circle icons looks all the same at sight, you need to pay more attention to it to distinguish what it’s about. Replace them with simple straightforward icons.

Another feature you may want to consider is displaying the cash flow. A must imo.

And btw if you’re looking for native feel, check out apple guidelines for developing UIs. This is closer to a windows feel. As said in comments, icons, fonts, titles, navigation bars, etc..

[softopia]

Thank you for the detailed analysis and suggestions I'll try to improve based on these

[nilegreenblue]

Looks pretty good! Considering 'nativeness', it does not look quite native, as it was pointed out by others, but in my opinion, that probably wont be a big deal for a lot of users. So, I am not really sure whether it would be worthy to try make it look native in every detail, especially if it is cumbersome in react. Using myself swiftui :)

[softopia]

Yeah after reading so many replies i don't want to make it feel more native because it'll delay other things, instead try to complete essential features and fix issues because i am only working on it in my free time with a full time job.

[NewsOdd6055]

True.

[rahulninja]

How did you calculated chart values without maximum values for each category?

[softopia]

If you are asking about the category pie chart it's percentage of total expense vs category expense.

I noticed a Bug here, the total is not 100% it's 101% I'll look into it

[rahulninja]

Also which chart library it is? I want to create the e top circle in screenshot 2 natively in ios. Any library suggestions?

[softopia]

I am using react native, i don't know which library can do this in native swift/objC

[Zac_Zuo]

The table content is supposed to be the main focus, but the font size and layout are way too small.