16
Leya
4y

This is a student helper app I coded and designed for our university that is written in Dart and flutter. For now it supports fetching the course schedule for a given student and the cafeteria menu. What do you guys think of the UI? Any recommendations for improvement or tips for working with flutter in general?

Comments
  • 6
    Looks very nice, but I think it has contrast problems which hamper legibility. I'd suggest you check the foreground / background contrast using https://webaim.org/resources/... and go for at least 4.5 : 1.

    Especially the tab captions for the inactive days are way below that minimum. This is only suitable for graphic elements that are disabled.

    You could instead highlight the active day by giving it a white box, not just the bottom border. Then you could also reduce the border width a little.

    In general, don't convey meaning by icons alone. It looks super neat, but is confusing and makes the UI less discoverable, thereby negating one of the advantages GUIs offer. Icons should be accompanied by text.
  • 3
    Or, with the icons, you could make that a persistent user setting. When installing, icons plus text are displayed, but the user can set it to "icons only" or "text only" or "icons plus text".

    Then it's discoverable, and once the user knows what's going on, they can reduce the display if they want.
  • 1
    I really like the UI and the color scheme!

    ps: Wünschte unsere schule hätte das so gut

    Any way you can rework the entire units mobile app?
  • 5
    wait a german university with a working api?
  • 1
    @kleopi unbelievable rite?
  • 5
    @kleopi nah man I had some nights of fun writing a scrapper to pull and parse the data out of their html mess for both the schedule and the cafeteria menu that both work in a completely different way with no documentation whatsoever 😂
  • 0
    @ElCapitan sounds more like it xD
  • 2
    Thanks for the feedback guys. Here is another screen I've just given a quick overhaul.
  • 3
    @ElCapitan Uh-oh, text over images is hard to read. I'd suggest to make the text more narrow with line breaks, maybe 2/3 of the full width, and having the image at the right side without overlap.

    Keep in mind that also students with less than perfect sight will want to use the app. Plus that it's a great way to learn about accessibility (Barrierefreiheit).

    See also WCAG 2.1 as established standard - level AA is common with level AAA where feasible and useful: https://www.w3.org/TR/WCAG21/
  • 2
    My 2 cents are, go for a dark theme right from the beginning.

    If you have to have it light, make the screen background a light shade of grey.

    And DO NOT use images as background for where text is. In your overhaul image, you can move the image to the 1/3 of the end of the item, and apply a fade gradient to the left of it. I think that'll look sexy in your app.
    (tip: I don't know how you do it in flutter, but in native, you can create a gradient drawable, with background's color at one end of it, and transparent at the other end, and show it above the image)
  • 3
    Ah and with contrast and images - it's not only about users with reduced vision, it's also for everyone once summer comes in and people use the app in bright sunshine.
  • 1
    @Fast-Nop While I see where you're coming from I don't think that the readability is that bad (and if it is making the color gradient over the image darker is also always an option.) and while accessibility defenetly should be a concern so should esthetics. And I see and use apps that display text over images on a daily basis and almost never had a problem reading anything so I don't know if it really should be such a big concern, especially because the text is short and relatively big. But maybe my vision is just to good to see the problem so I will definitely consider some alternatives. But I don't think moving the image on the left side of the card would work because it either would cut the image off in an unnatural way or fuck up the aspect ratio because the screen is to small to display both image and text side by side. Maybe I should consider moving the image above the text points?
  • 1
    @ElCapitan You could have the image at the right side with crop-to-centre to address the aspect ratio, and upon tap, the full image could be shown.

    And well, esthetics should never come before usability because that ends up like Apple - with beautiful, but useless things. Or like many shiny websites that drive customers away.
  • 1
    @Fast-Nop thanks definitely will have to see if crop-to-center is a thing in flutter because otherwise I guess I would have to code the whole fetching-cropping-caching process that I now can outsource to a flutter-library myself.
  • 2
    @ElCapitan this is awesome. Really fantastic, literally in awe over this
  • 0
    @Ranchu Thanks but to get to you're question I'm not quite sure if I understand what you're asking? What do you mean with the entire units mobile app?
  • 0
    @Ranchu Thanks man 😁
  • 0
    @ElCapitan Well essentially it's an app that displays our schedules, assignments and if there's any teachers unavailable and we get a lesson off.

    The layout is horrible, constantly crashes on iOS and Android on almost any student's device.

    Literally takes a few minutes to load today's schedule, even with high-speed connection.

    More or less just wish thinking that someone would fix the shit.
  • 0
    Btw I still remember the vedge lasagne from my uni days, that's how awful it was.

    It was so bad that when every counter had a long queue, the only one that didn't was the vedge lasagne. Only freshers would choose it, and then only one time.

    Memories brought back by these pictures of uni dishes. ^^
  • 0
    @Ranchu Well I'm still full one working on the app for our university (there are some features missing I would like to implement) and I'm not even sure if they would be okay with me releasing the app as it is because it's probably using some of their servers and services in ways they aren't intended to be used. After all I'm just pulling my data out of the web interface. So finding out with whom to speak to get clearance is also something I will sooner or later have to concern myself with.

    Also schedules and student specific things most of the time are hidden behind user accounts I don't have access to and your university probably isn't even using the same software as ours. Developing an app under this conditions wouldn't be feasible. But maybe you could give it a try yourself?
    I would start out with just writing a parser library that you can test with a quick console script that's just concerned with giving you back the schedule for example as an object you can work with easily.
  • 0
    @Ranchu once you have this working you simply import your parser library in your UI project and start working on the interface. If you want an example on how you might approach this task feel free to take a look at my scrapper / parser library if written for the app.

    https://github.com/ElCap1tan/...
  • 0
    For meit seems that dropping flutter and going for two native apps would be easier to implement and also would expand your skillset more
  • 0
    @zemaitis as nice as this sound I'm probably not going to rewrite my scrapper a third and fourth time in Java and swift (already did it in python and now in dart for the flutter app) just to build two native apps (flutter is compiled to native code for both devices anyway). Also I don't own a Mac for writing and testing on iOS. Saw a medium article about how to build flutter apps for ios online though so I might give that a try.

    I'm also thinking that flutter and dart will get some more attention in the future because working with it was quite enjoyable.
  • 0
    @ElCapitan That's a great idea! Thanks for your advice!
  • 0
    This has become an essential aspect, particularly with education increasingly reliant on technology. I predominantly utilize such resources for educational purposes. Given the complexities of the learning process, I'm grateful for any assistance available https://resellerratings.com/store/... It has proven invaluable in aiding me with a variety of assignments and addressing writing challenges. Consequently, my work has shown improvement in both quality and originality
Add Comment