APEX UX: treat your users as you like to be treated

APEX World 2025

Philipp Hartenfeller

20-MAR-2025 | Ede

$whoami

Philipp Hartenfeller

  • Düsseldorf, Germany
  • Oracle APEX Dev since 2016
  • Product Lead at United Codes
  • Web Dev and Databases

Agenda

(Shift + A: jump to Agenda, Shift + O: overview)

Introduction to UX

What is bad UX?

Anything that gets in the way of the user achieving their goal.

What is bad UX?

Anything that makes the user fearful or uncertain.

Definition

“User experience (UX) is how a user interacts with and experiences a product, system or service. It includes a person's perceptions of utility, ease of use, and efficiency.”
Wikipedia

Easier said than done

  • Humans are individuals
  • Users have different needs
  • Hard to measure → good UX is invisible
  • Constraints: Time, Budget, APEX, Design Skills, etc.

Step1: understand your audience

Deep user understanding is the foundation of exceptional experiences.

User demographics

  • Age range
  • Cultural background
  • Education level

Device and platform

  • Small vs. large screen
  • Multiple monitors?
  • Touchscreen / Mouse / Keyboard
  • Wired internet connection / mobile

Usage context

  • How much time do users spend with the app?
  • What tasks do they perform?
  • How critical are the tasks?

Different purpose and tone

Both good UX, but users visit for completely different things

Style differences

    NYT Lego
    Black and white Colorful
    Serif fonts Sans-serif fonts
    Clean and professional Playful and engaging
    Text heavy / few images Huge images / not much text
    → "Anything I should read?" → "So much to explore!"

There is no golden standard

  • Good UX is affected by all these criteria
  • Understand your audience to know how to fulfil their needs
  • This talk: typical data-driven apps for company employees
  • Adapt the tips to your cases
  • Feel free to discuss!

App Structure

Why structure is important

  • Users don't like to get lost
  • Users like to easily find things
  • Users don't like to get overwhelmed by too many options
  • Users value predictable navigation patterns
  • Users appreciate logical grouping of related features
  • Users want quick access to frequently used functions

Don't: new page → add to navigation

  • This is just overwhelming, users will scroll this a lot during the day
  • New users need to find their way around
  • Existing users want to access things quickly

Do: structured menu

  • Grouped in logical sections
  • Level of details hidden by default
  • (Not every page has to be directly accessible from nav menu)

Do: nav pages

  • Get an overview
  • Additional description
  • What else to do on navigation entry click?

Do: Breadcrumbs

  • Know where you are
  • Links to get up some levels

Do: Make page parameters obvious

What do these have in common? (Google)

What do these have in common? (Wikipedia)

What do these have in common? (Amazon)

What do these have in common? (YouTube)

What do these have in common? (New York Times)

Do: Search

  • Search configurations
  • Search Page
  • Better: global search

Style and Color

Aim for simple, boring

  • Content matters
  • The app is not your canvas
  • This is not about taste
  • Remember the pages I showed before?
  • See how these slides look?

Photo by Dannie Jing on Unsplash

It's not (only) about Web Design

  • NYT from 1918
  • Black and white
  • Simple
  • Well structured

Photo by Charles Ransom Miller on Wikipedia

Example: apex.world

  • Mostly black, white greys
  • Colors reserved for content, links and highlights

Don't: color buttons

  • Buttons are perfectly visible without highlighting them
  • If you squint the buttons will take all your attention

Do: highlight primary action

  • Action people want to use most of the time
  • There can't be 2 primary actions
  • Primary actions are optional

Colors and semantical meaning

  • u-hot-text for highlighting
  • u-success-text for good/safe/success
  • u-warning-text for caution/warning
  • u-danger-text for bad/destructive/danger

In action

Hot buttons shouldn't be red,yellow,green

  • Even if your company branding has that color
  • Clashes with semantic meaning

Data display

Tables

  • Structured and analytical data display
  • Mostly for big screens
  • Interactive Report: sort, filter, saved reports, highlights, etc.

Adam Wathan & Steve Schoger - Refactoring UI

“Visual hierarchy refers to how important the elements in an interface appear in relation to one another, and it's the most effective tool you have for making something feel designed.

When everything in an interface is competing for attention, it feels noisy and chaotic, like one big wall of content where it's not clear what actually matters.”

Hierarchy in Tables is hard

  • Too structured
  • Row-by-row, left to right
  • So what to use instead?

Custom views

  • Easy to scan
  • Responsiveness for mobile
  • Doable with Template Components

Hierarchy through typography

Example from Refactoring UI

Which types of charts to use?

  • This is complicated
  • Charts are not an end in themselves. What question should a chart answer?
  • Use this From Data to Viz decision tree to pick a type
  • Also take a look at the listed Caveats like don't use Pie charts

Uncategorized Tips

Offer keyboard shortcuts

            
              apex.actions.add({
                name: "send-email",
                label: "Send Email",
                action: (event, focusElement) => {...}
              });

              apex.actions.addShortcut(
                "Ctrl+Shift+E",
                "send-email");

For power users

Offer predictable values

  • When values are predictable don't let users go through long lists of options
  • Offer quick picks (static)
  • From Insum Instant Tips #50 with Mike Hichwa: top matching options with icons and sorted in popup lov

Label style

  • Floating labels are especially designed for mobile users
  • If your app is desktop only, your users might prefer traditional labels

Only use icons when their meanings is obvious

  • Omit icons if they don't add value
  • Check: would you get what an action does only with the icon and without the label?

Uncertainty causes fear

  • You know the app as you have built it
  • Users don't know what's behind the UI
  • Give consistent and good naming
  • Offer help texts almost everywhere
  • Use language everybody understands
  • Add "are you sure" dialogs for destructive actions

Don't overwhelm users

  • Sub pages if one page gets too big / wizards
  • Different pages for different actions
  • Don't show too many buttons, hide actions behind action menus
  • Rarely used information in collapsed regions

Don't frustrate users

  • Huge forms? Let users save the progress as a draft
  • Use appropriate session timeout lengths
  • Validate early
  • Give clear error information
  • Keep pages fast (lazy loading, optimize your DB)
  • Move long running tasks to the background (+ notification when done)

Be in contact with your users

  • Watch how they use the app
  • Let them give you feedback
  • Consider evaluating usage metrics

If you take away one thing from this talk

Simple boring UIs that serve the content to not overwhelm the users

United Codes

Thank you!

Contact: phartenfeller at united-codes.com

Slides at: hartenfeller.dev

Evaluate this talk