User Interaction and User Interface Design

Here is a good explanation on the difference between user interface design and user interaction design

Your design is an extension of your brand. You need to think about the UI as your digital staff, the “people” who facilitate interactions between your “customers” and your “store.” Interaction design, then, is how your digital staff engages with customers to meet their needs. Naturally you’ll want your staff to be helpful, accommodating, and friendly – that will make your customer enjoy shopping at your store.

But a poorly designed interface is like a staff that’s unhelpful, rude, and, at times, doesn’t even do their job. Making the right decisions in UI design is hiring the right staff. Making the right decisions in interaction design is training that staff to work in the most efficient and pleasant manner possible.

– Excerpt from The 5 Building Blocks of interaction Design by UXPin.
user interaction book cover

Weather App [Update]

Taking cues from the changes I made to the to-do list app, I went and refreshed the weather app as well. Instead of a full page display of the information, I decided it would look better confined to one module. Functionality is still the same. I kept them both up on codepen as well.

 

New Version: (View on Codepen)
weather-app

 

Old Version: (View on Codepen)
weather-app-old

Todo List App [Update]

I previously posted to-do list app using AngularJS. Its been spruced up a bit and looks more aesthetically appealing.

todo-list

View on code pen.

Update to blog theme

So I went and added a logo/avatar section to the customizer so that users of the theme can upload one of there own.

The original code has the avatar image hard-coded and would require editing the theme files in order to change it. The old avatar image is still set to the default until the user chooses to update it.

avatar-customizer

Again, the theme files can be download from my theme’s github repo.