Music player musings

I said I struggled with the last challenge. I have been looking at what I designed and I can definitely see some problems with it.

The major issue I think is that the album/song images are displayed on a carousel type thing – were the user can swipe to move to the next song. That in itself is not a problem, But I have put clickable elements on it such as the search and menu. so if the user try to tap one of these they may accidentally move the carousel. Big usability fail!!

Illustration of a iphone music player app

Music player take two

To solve this I have moved the menu and associated control above the carousel. This was a minor rejig but would make the usability much better.

I changed the colours a bit too, not for usability, just cos I felt like it.

Illustration of music player with new layout

The Z pattern

I think somehow in my last UI attempt “The landing page” I managed to implement the Z design pattern without even trying (yay me). The Z pattern is basically a layout that makes use of how people scan screens (in the western cultures) left to right, top to bottom. Important elements are located at the end points and elbows of the Z. A full explanation of the Z pattern can be found on creativebloq.

The logo (very important) is located top left – identifies the site owner. The eye tracks right across the main nav. The end of the main nav is often where the search is located. It then goes down via the main image to the bottom left button to the bottom right. The last button on the bottom right could be a call to action such as ‘Buy now!!’…not sure people actually buy new cars online, having only had second hand myself, so I thought reading some good reviews might be persuasive instead, but you get the idea.

Web page showing z pattern overlay