Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

APEX 21.1: Inconsistent and poor quality icon design

fac586Jun 27 2021 — edited Jun 29 2021

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:
Lack of consistency with icon design patterns used in earlier releases (especially affecting file icons)
Violations of icon naming conventions established in earlier releases
Poor quality implementation of some designs
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:
image.pngimage.pngGenerally, 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
"Heat map" has too many meanings. This is actually a representation of a circular packing diagram.
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.

Comments

Post Details

Added on Jun 27 2021
10 comments
1,026 views