Forum Stats

  • 3,824,872 Users
  • 2,260,435 Discussions
  • 7,896,336 Comments

Discussions

APEX 21.1: Inconsistent and poor quality icon design

fac586
fac586 Senior Technical ArchitectMember Posts: 20,935 Red Diamond
edited Jun 29, 2021 7:23PM in APEX Discussions

While I appreciated the addition of more Font APEX icons in 21.1—especially the medical ones which could be useful in my current project—this was tinged with disappointment as closer examination revealed a number of problems with the new icons.

I unleashed my inner font geek to comprehensively review the new offerings on a page showing all of the relevant icons at standard and enlarged sizes.

The main issues noted are:

  1. Lack of consistency with icon design patterns used in earlier releases (especially affecting file icons)
  2. Violations of icon naming conventions established in earlier releases
  3. Poor quality implementation of some designs
  4. Questionable utility of some of the provided designs

I would consider 1 & 2 to be bugs. The differences between the 21.1 and earlier file icons are very obvious and they look incongruous and uneven when used together. A similar naming convention issue was previously raised for the 5.1 release and subsequently fixed.

3 & 4 are more subjective. I spot things like inconsistent stroke widths because I am obsessive about fonts. Others may neither notice nor care about things like this. However I would think that Oracle and its employees want APEX to look as good as it possibly can, and bug fixes and minor design tweaks can be implemented without affecting the meaning of the icons or their applicability to existing use cases.

File Icons

The problems that exist in the new file icons are my primary concern. The original Font APEX file icons are crisply designed, with a distinctive and quirky gap on the inner edge of their "dog-ear" corners. I really like them. We are using several of the existing file type icons in our current project, and specific CSV and prescription file icons would be welcome additions. However the new icon's inconsistencies in proportion and design are too obvious at fa-2x sizes to allow them to be used.

The problems can be seen by comparing the earlier fa-file-excel-o icon with the new fa-file-csv one:

Generally, the issues with the new file icons are:

  • The distinctive Font APEX gap on the turned-down corner is absent.
  • Wrong proportions: the aspect ratio is unnaturally squat, different from both the earlier icon style, and from the A4 and Letter document sizes that provide their real-world inspiration.
  • Text in the small versions should be positioned higher, with the bottom edge line continuing to half the page width.
  • Text in the large versions is not in a floating box like the original icons show their file extensions.
  • Different lettering style—compare more angular "S" and "C" on original fa-file-excel-o and fa-file-word-o icons.

In case it isn't obvious: I am advocating that the new 21.1 file icons be revised to match the appearance of those provided in previous versions, not the other way round.

With respect to the lettering style I don't really care which is used (I think I actually prefer the new one—with the exception of the too-wide "N"), as long as it is consistent.

Looking at each of the new icons (view examples):

fa-file-brackets

  • Missing gap in corner
  • Squatter, less attractive proportions

fa-file-csv

  • Missing gap in corner
  • Wrong proportions
  • Different lettering style—compare more angular "S" and "C" on original fa-file-excel-o and fa-file-word-o icons
  • Text in small version should be positioned higher, and the bottom edge line should continue to half the width
  • Text in large version is not in a floating box like other icons showing a file extension

fa-file-json

  • Missing gap in corner
  • Wrong proportions
  • Different lettering style
  • Text in small version should be positioned higher, and the bottom edge line should continue to half the width
  • Text in large version is not in a floating box like other icons showing a file extension
  • Text can be made narrower to fit the original icon size abd proportions by using the original angular style and a lower-case style reprensentation of the "N", with a semi-rounded top instead of a diagonal crossbar

fa-file-medical

  • Missing gap in corner
  • Wrong proportions

fa-file-prescription

  • Missing gap in corner
  • Wrong proportions
  • Different lettering style

fa-file-signature

  • Missing gap in corner
  • Wrong proportions

Other New APEX 21.1 Icons

The rest of the new APEX 21.1 icons exhibit fewer generic issues (with the exception of the alarm clock series).

Again, considering each icon in turn (view examples):

fa-2d-mode

  • Different lettering style—compare "D" in original fa-file-word-o icon
  • Inconsistent line width on bow of "D"
  • Not really sure what the use case for this is in an APEX context, but if it has one I would prefer to see a pictorial rather than textual representation

fa-3d-mode

  • Different lettering style
  • Inconsistent line width on bow of "D"
  • Not really sure what the use case for this is in an APEX context, but if it has one I would prefer to see a pictorial rather than textual representation

fa-404

  • Inconsistent element proportions between small and large versions (e.g. size and spacing of eyes)

fa-4k

  • Inconsistent element proportions between small and large versions

fa-abacus

  • Inconsistent design approach between small and large versions: large version adds more design elements at the same size rather than increasing the size of those used in the small icon (compare with fa-accessor icons below)

fa-accordion

  • Don't think the meaning of this is particularly clear
  • Potential use cases are also unclear, now that APEX has dropped support for jQuery UI accordions!
  • Circles on large version are confusing and unnecessary

fa-alarm-check

  • Alarm bells on small version look more like buttons, which gives the impression of a stopwatch rather than an alarm clock. Can't these be made to have a more rounded appearance?
  • Conversely on the large version, the attachment of the alarm bells directly to the body of the clock gives the appearance of ears on a teddy bear. I would suggest they be physically separated like the small version.

fa-alarm-clock

  • Large version: inconsistent line width on curve of right alarm bell

fa-alarm-minus

  • Large version: inconsistent line widths on curves of alarm bells

fa-alarm-plus

  • Large version: inconsistent line widths on curves of alarm bells

fa-alarm-snooze

  • Large version: inconsistent line widths on curves of alarm bells

fa-alarm-times

  • Large version: inconsistent line widths on curves of alarm bells
  • Large version looks like a koala

fa-bug-slash

  • Don't think this works. Slash should not overlap any of the bug's legs.

fa-file-brackets

  • See previous evaluation of file icons

fa-file-csv

  • See previous evaluation of file icons

fa-file-json

  • See previous evaluation of file icons

fa-file-medical

  • See previous evaluation of file icons

fa-file-prescription

  • See previous evaluation of file icons

fa-file-signature

  • See previous evaluation of file icons

fa-heat-map

fa-line-map

  • This (especially the small version) meant nothing to me when I first saw it, seemingly bearing more resemblance to the ideogram on the original fa-language icon than Beck's classic tube map.
  • Why don' the lines attach at the centre of the nodes?

fa-location-arrow-solid

  • This violates the established Font APEX icon class naming convention. The -solid suffix is superfluous. The problem is that the pre-existing fa-location-arrow icon should have been called fa-location-arrow-o as it is an outline icon. In my opinion the naming convention should take precedence, with this new icon being named fa-location-arrow, and the earlier implementation being renamed fa-location-arrow-o, even if this changes the appearance of existing applications.

fa-location-circle

  • This violates the established Font APEX icon class naming convention. Should be fa-location-circle-o.

fa-location-circle-solid

  • This violates the established Font APEX icon class naming convention. Should be fa-location-circle.

fa-map-marker-camera

  • I don't like this. It's not at all clear what the small version (especially at the default 16px size) is supposed to represent.

fa-map-marker-camera-o

  • Also don't like this. Looks like the camera is melting.

fa-medical-mask

  • It's not obvious this is supposed to represent. It's actually quite similar to the pre-existing fa-trophy.

fa-prescription

  • Different lettering style

fa-prescription-sheet

  • Why is this necessary? It's virtually the same as fa-file-prescription, which if implemented properly following the original file icon conventions would look far better. I would much rather have another occupational icon representing a pharmacist/scientist/professional or engineer/builder than this amateurish duplicate of another icon.
  • Different lettering style

fa-radiation

  • Central dot in small version is too small
  • Would look better if the "rays" were represented either by concentric lines (see existing fa-feed icon) or if the segments were equal in size or smaller than the gaps between them

fa-size-l

  • Are these really necessary? In what circumstances would they be used instead of plain text?

fa-size-s

  • Different lettering style

fa-size-xl

  • Inconsistent and poor letter spacing

fa-size-xs

  • Different lettering style
  • Inconsistent and poor letter spacing

fa-size-xxl

  • Inconsistent and poor letter spacing

fa-user-slash

  • This does not look good. A steeper angle on the slash would enable more of the base user outline to be retained. Existing -slash icons position the slash at different angles to better fit with the underlying design.
JeanYves BernierTim Kimberl-OracleChandler BingPaavoMarkusHohloch

Comments

  • fac586
    fac586 Senior Technical Architect Member Posts: 20,935 Red Diamond

    Bumped due to delay in passing spam checks.

    Javier P
  • Cj83
    Cj83 Member Posts: 8 Green Ribbon

    Hi Hilary,

    Could I also add to this thread, and say that the emoji icons featuring a 'tongue' are actually spelt incorrectly as 'tounge'. It does look like this was present in 20.2 though, so not specifically a 21.1 font issue.

    Just a small thing, but up there with consistency and quality.

    Kind Regards,

    Cj

  • Hilary Farrell-Oracle
    Hilary Farrell-Oracle Software Development Senior Manager Member Posts: 2,346 Employee

    Hi Cj,

    Absolutely, that's no problem adding your feedback to the list - I've added it to our internal tracking ER. Thanks for taking the time to provide it....and thanks again, Paul for your original posting. We've discussed this internally, and do hope to have the feedback addressed in a future release - hopefully the next one, schedule permitting.

    Regards,

    Hilary

  • ShakeebRahman-Oracle
    ShakeebRahman-Oracle Member Posts: 66 Employee

    Hi Paul, Cj,

    I wanted to chime in and thank you for your feedback. It is really appreciated – you've made it easy for us to digest this feedback and investigate things.

    It's clear we've missed the mark here and we'll certainly work towards improving things for the next release. Thank you for patience.

    Shakeeb

    Scott WesleyPaavoMcRivers
  • Cj83
    Cj83 Member Posts: 8 Green Ribbon
    edited Jul 7, 2021 11:55AM

    Hi Shakeeb, Hilary,

    Thanks for your responses. One other icon I have found to be incorrect is shown in the image below on the pagination 'Next' button:

    This is using Pagination: Row Ranges X to Y of Z (with pagination).

    Pagination is for a Classic Report in a collapsible region with the following settings:


    It looks like the CSS for the class 'icon-right-arrow' on the pagination is conflicting the same named class on the collapsible region!

    Kind Regards,

    Cj

    Paavo
  • Hilary Farrell-Oracle
    Hilary Farrell-Oracle Software Development Senior Manager Member Posts: 2,346 Employee

    Thanks Cj,

    I've flagged this css class conflict to Tim, so we'll take a look at that issue also.

    Regards,

    Hilary

    Paavo
  • Hilary Farrell-Oracle
    Hilary Farrell-Oracle Software Development Senior Manager Member Posts: 2,346 Employee

    Hi Paul,

    I can't take credit for the fixes - that all goes to Shakeeb's team...but thank you very much for the positive feedback.

    Thanks again for raising these inconsistencies here on the forum in the first instance. It's down to invaluable feedback from you and many other members of the APEX community, through your posts here on the forum, that help to make APEX better.

    Thanks,

    Hilary

    Scott WesleyPaavoMcRivers
  • Scott Wesley
    Scott Wesley Member Posts: 6,196 Gold Crown

    And thank you, Hilary.

    With positive reinforcement like that, it makes it all the more easier to keep coming back to help.

    PaavoMarkusHohlochMcRivers