search

openedx / openedx-app-ios

The mobile app for iOS for the Open EdX Platform.
Apache License 2.0
19 stars 13 forks source link

[iOS] Verify and Fix Course Level Empty Screens #454

Open moiz994 opened 2 weeks ago

moiz994 commented 2 weeks ago

We need to verify and fix empty states of the major modules within the course experience.

Case 1: Empty state for handouts If there are no handouts in the course we need to show a screen letting the users know of this instead of showing an empty area under the pill navigation.

Icon to be used: https://www.figma.com/design/iZ56YMjbRMShCCDxqrqRrR/Open-edX-Mobile-App-All-Screens-v2.1?node-id=7569-52011&t=WPTCJ4I9SHy0sBji-4 image

Copy to be used: There are currently no handouts for this course.

Case 2: Empty Screen for announcements Icon to be used: https://www.figma.com/design/iZ56YMjbRMShCCDxqrqRrR/Open-edX-Mobile-App-All-Screens-v2.1?node-id=12519-78253&t=WPTCJ4I9SHy0sBji-4 image

Copy to be used: There are currently no announcements for this course.

Case 3: Empty screen for videos Icon to be used: https://www.figma.com/design/iZ56YMjbRMShCCDxqrqRrR/Open-edX-Mobile-App-All-Screens-v2.1?node-id=14629-260626&t=WPTCJ4I9SHy0sBji-4 image

Copy to be used: There are currently no vidoes for this course.

moiz994 commented 2 weeks ago

@sdaitzman can you please verify the choice of icons for this task?

sdaitzman commented 2 weeks ago

Hi @moiz994, thanks for checking about these! The icons for cases 1 and 3 make sense to me.

For announcements, that icon is associated with an error state. I wonder if another Material Design Round icon could avoid that signifier? I'm happy to pull together a mockup with a few options, if that would be helpful. Either way, I can add these empty cases to Figma. I'm also adding this to the next mobile design weekly agenda.

announcement (still has some of the same issue, and looks similar to the discussion tab icon): image

email: image

mail_outline: image

mark_email_unread (would imply new unread messages, so might make sense not to use this except for that state): image

moiz994 commented 2 weeks ago

Usually a megaphone (📣 / 📢) makes a good relation with announcements. Maybe we can see if there's a relevant icon to that?

sdaitzman commented 1 week ago

Great idea @moiz994, we could use this icon (Material Design Round calls this campaign)

image

moiz994 commented 1 week ago

Thanks, Sam! Is it possible for you to create quick error screens for these cases? It'll help the devs a lot.