Front to Back

adamlbarrett.bsky.social

BigAB

Never Back to Front

Software Development

Big Companies and Small

PEBCAK

Front to Back

Never Back to Front

Never
Back
to Front

AWS Console

Submit to whom?

The button with the text "submit", though a known design anti-pattern, is so common that people have no problem with it, but it is still a good example of how thinking of the implementation works its way forward to the User Experience

So how do we do this?

(the whole front-to-back thing)

Ask yourself...

What can the user see?
What can the user do?

What can the user see?

Where can I get the info I need?

What can the user do?

What are all the different interactions?

UI Events

User Interactions

System Actions

❓

{}

class Cart {
  addProduct(product, quantity = 1) {/*...*/}
  
  removeProduct(product) {/*...*/}
  
  changeQuantity(product, quantity) {/*...*/}
  
  addPromotionCode(code) {/*...*/}
  
  subscribe(callback) {/*...*/}
  
  get data() {/*...*/}
}

What can the user see?

What can the user do?

What data do I need?

What actions can I take?

What data do they need?

When designing modules try and remember the 80/20 rule of design. Cover the most common actions with direct functions or methods, but possible allow for more complicated actions too

What actions can they take?

export function addCourseToSchedule {
  /*..*/
}

export function beginCourse {
  /*..*/
}


export function abandonCourse {
  /*..*/
}


export function singUpForWaitingList {
  /*..*/
}