2

I am creating somewhat of a reminders feature for my app and one of the features (time) is optional. When all options are selected, I have an ideal layout with one item in each corner of the card. When the time is missing, however, I feel that it is best to move the category to the bottom left for readability, even though the cards with time have the category in the bottom right. I want to keep the layout of the first card because the title and time are most important, so by keeping them left aligned users can scan and get the important information first. My issue is, with the second card (no time), will the inconsistency in card design throw users off, even if the readability is improved this way? An image is provided below:

enter image description here

Solution: I decided to keep the layout of the first card while removing the time entireley from the design when it is not there. Here is the layout of the current solution, with fixed margins: enter image description here

Improve this question
3
  • The "No Alert": 1) outside the box eats screen estate unnecessarily, 2) looks like a label/caption for the whole box which, if any, should be Task or the like, 3) is correct since the thing below is really no alert but a task or the like. :)
    – Gerold Broser
    Feb 28 at 20:26
  • 1
    @GeroldBroser Ah that was my bad. So there are various ways to filter this list. The first image is sorted by "recently added", so there are no headers. The second image will have headers of various sorts such as "Today's Scheduled", "No alert" and "Complete". The headers appear/disappear depending on the "sort" option selected. Mainly, I want to find a consistent card design for both types of tasks, those with an alert time and those without
    – Gene Lee
    Feb 28 at 21:44
  • Then I'd call the header Without Alert.
    – Gerold Broser
    Feb 28 at 22:50

2 Answers 2

Reset to default
1

I'd prefer always right-aligning the category (under the yellow disk as in the task above), also if no time is specified/selected:

  1. Personally, for the sake of "look (exactly) there (always) and you'll find it".

  2. If a category is named:

    • Noon,
    • Midnight,
    • or even 🕔 11:00 am

    and if it's left-aligned (right below the task's title) then there is a category, which looks like a time, located at the usual place of a "real" time but it isn't one: it's a category. That's confusing then.

PS: Revised 2. to make it clearer.

Improve this answer
5
  • Im not sure exactly what you mean by right-align. The items on the left are left-aligned and the items on the right are right-aligned. Can you clarify what you mean? for your points: 1. I completely agree with this idea, that's why I posted this question. Im having trouble having everything always be in the same spot while staying with my ux priniciples 2. The categories are completely customizable, so if a user names their category noon or midnight then yes, that is possible, but it's not possible to add "noon" or "midnight" if the user doesn't select a time on their own.
    – Gene Lee
    Feb 28 at 1:57
  • 1
    If a placeholder is needed, it would have to be something other than time, like "no time", but I feel that that's adding unncessary info
    – Gene Lee
    Feb 28 at 2:00
  • @GeneLee I adapted my first sentence to be more precise. Is it clearer now? I thought that the cat's are customizable. That's why I chose these examples and the question was a rhetoric one: If they are defined like that, or similar, there is a cat. which looks like a time at the usual place of the time but it isn't one, it's a cat. That's confusing.
    – Gerold Broser
    Feb 28 at 2:30
  • @GeneLee I do not see a need for a (visible) placeholder if the time is not specified, since you write it's optional. OTH, if it's important/essential to specify a time I'd place a hint like "No time specified [yet]." with a light color from one of the silver.
    – Gerold Broser
    Feb 28 at 2:39
  • 1
    I misunderstood your first sentence at first, but that is exactly the solution I ended up using. Marked your answer correct
    – Gene Lee
    Mar 2 at 1:58
3

I understand your concern about layout consistency with respect to usage, but I think before checking for functionality issues you should create a firm base framework to support it. At the moment, at first glance, it's perceived that there is absolutely no equitable margins. This doesn't mean they must all be the same, but they should maintain a criterion, at least in equivalent areas (for example, following the below image: g and h). Without this foundation, any visual layout fix will be a patch with no solution at all.

enter image description here

To answer the question, the easiest and most immediate solution is to keep the unanswered form field without content. In forms, the usual thing regarding optionality is to fill in or not the field, not remove it.

enter image description here

Improve this answer
6
  • 1
    I agree with the first part re the margins. While I generally prefer more information over less displaying a "non-time" when it's optional, as Gene mentioned in the Q, looks a bit overloaded/cluttered to me.
    – Gerold Broser
    Feb 28 at 12:05
  • 1
    @Danielillo I think the problem arises in that if the user creates a list (ex: chores) and has no times assigned to a list of 10 chores, then those 10 items will have a blank time creating more visual noise. Depending on the category, all items may have times, none of them, or anywhere in between. I want to account for all scenarios. I have been met with resistance with this app design since this app is geared towards senior citizens, so the less overwhelming/visual noise the better. I have been trying to reduce as much text/extra design as much as possible while keeping a proper ux.
    – Gene Lee
    Feb 28 at 17:29
  • I marked this answer as correct for part 1 (i.e. fixing the margins), however I did not use any provided answer for fixing my layout issue. I posted the solution I made in the edit above
    – Gene Lee
    Feb 28 at 18:58
  • @GeneLee How comes "I did not use any provided answer for fixing my layout issue"? Apart from the "No Alert" hint that's what I proposed in the very first answer here. And I mentioned a "no time specified hint" in a comment there (admitted, under different circumstances).
    – Gerold Broser
    Feb 28 at 20:10
  • 1
    @GeroldBroser Ah, because you answered in text (used to images), I think I must've misunderstood the "right-align category" part of your answer. That is indeed the layout I went with, so I marked your answer correct instead. My apologies
    – Gene Lee
    Mar 2 at 1:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.