Keren Gu's Picazón

Sharing and Scratching Itches Everywhere

Leave a comment

Lessons on UI

After my previous post, Bad UI is Bad UX, I spent some time studying the UI of apps and websites around me. I wish I could show you how bad my old UI actually was. (At some point, I’ll revert back to the old UI, and write a post with comparisons.) But for now, I want to share some very simple lessons that I learned.

Lesson 1, “sharp corners” doesn’t mean shitty, and “round corners” aren’t necessarily classy. Default android buttons and TextViews are rectangles, with sharp corners, where as iOS present you with round corners by default (so I heard). So I took a look at the apps that came with Android, the settings, Gmail, etc., they looked just fine and elegant with sharp edges. Better yet, the sharp and straight lines looked cleaner.

Lesson 2, Margins. Have margins, and that is all.

Lesson 3, color “families”? Colors have 3 components, and a 4th component for transparency. (Transparencies are nice.) When choosing colors on a color chart, there are 3 axis of movements: 2 on the shades, and 1 for picking the color. An easy practice that I found useful was selecting 1 shade, and then choose all app colors in that shade. It the UI will naturally look harmonious. I will never use @color/blue with @color/green again.

If you’ve got any UI tips, please share. Still learning.

OH! And for background, a friend suggested SubtlePatterns — it’s addictive!


1 Comment

Bad UI is Bad UX

Over the past 3 weeks, I have been working on Project SmartCart. The section that I’m working on is creating an Android App that assists the every need of the shopper. The app is the torso of the project. Then comes the shopping cart, the barcode scanner (disaster), and the square (difficulty).

By the end of week 2, most functionalities are done. This includes implementing the backend database, adding items, recommendations, finding items, coupons. I was feeling good, but not really. When I used the app, it felt like shit. More descriptively, it felt like an app from the 90’s. It mainly looked bad.

The perfectionists/professionals of UX said that UX is not UI. But when you have terrible UI, you have terrible UX. When testing my app, I didn’t mind the hassel of typing in pseudo barcodes like “111111”. (That will be fixed when I get the barcode scanner, I believe.) But the solid color edges, the sharp corners, the lack of transition, and fades, the solid background.

I know nothing about UI. This is my first app, but I can’t allow it to look like the remains of some previous century.