DEV Community: Ceara C

Data table UX tip - alignment

Ceara C — Fri, 17 Sep 2021 00:36:45 +0000

Data tables are super important and really hard to get them right. I think that they are a great example of how visual design (UI design), UX and interactivity become best friends.

I've got like 40 tips like these for building tables🤓, but here's just a small one (that I made into a cute GIF).

When you make a table, a key part is making it really readable. A big part of things being readable is how the eye scans things, especially in a table, where you're scanning a ton of values.

At least in the case of English text, in general you want to make those types of values left aligned. Although centre aligned can seem like a good idea sometimes...the fact is that unfortunately, data that users input is super varied in length so when you scan it the eyeball jumbles everywhere.

Hope this helps anyone strugglin with table design.

Get up and running on Figma (tips for devs)🏃🏼‍♀️

Ceara C — Wed, 23 Jun 2021 22:17:49 +0000

Hey all,

Thought I'd put together this quick breakdown for devs who are being onboarded onto Figma for the first time. (There are some tricks and funky things to watch for as you get used to it)

Quick note on Figma: Figma is a common and dominant design tool in the UI world. It does live collab and designers like it because you can give devs/POs view access and you can navigate it independently.

Getting up and running.

Expect an invite in your inbox, it looks like this:

This invitation will get you into the file - it will get you to create a login/password.

If you have view access your interface looks like this:

☝️ Don't forget the difference between the default mode (see code etc) and prototype mode (click through and see behaviour)

Key things to watch for

the account creation flow is a bit weird and you need to select "CREATE" an account rather than enter a password
you can follow other people and quickly find where they are by clicking their avatar
you can invite people to the file (and not require a designer to do it for you)
you can export assets right out of the file

💡If this was useful, comment and I can add to this little post with more juicy info.

Spruce up your data table ux/ui

Ceara C — Mon, 08 Mar 2021 03:15:34 +0000

Have you ever noticed that so many data tables out there in the world are absolutely hard to use, weird and kind of generally sad?

I have.

For enterprise products at least, data tables can be the foundation of the user experience. People live and die by those rows and often have to struggle, hunched over their computers, to find the data they need. (I assume they also softly weep into their keyboards as well.)

I've been tasked with designing/redesigning a cadrillion tables in my ux life (as have my team), so we compiled some comprehensive design documentation so that maybe, just maybe, tables in the world can improve.

(For real though, one of our dev buddies redesigned his tables the same day he read our giant article and said "your article made me realize our tables suck".)

What do you think? Did we miss anything? https://pencilandpaper.io/articles/user-experience/ux-pattern-analysis-enterprise-data-tables/

🔎🕵What's your best/worst experiences collaborating with UX/UI designers?

Ceara C — Tue, 02 Mar 2021 23:49:15 +0000

I personally think the collaboration process between designer/developer can be extremely fun and gratifying...I'm really curious from the developer perspective, when working with a UX/UI designers:

What is an excellent experience🤩?
What is a nooooot excellent experience😬?
What are some workflow changes you've done in your team to make the collaboration work well🚀?

I'm wondering if there are any universal best practices in the workflow (oorrr not).