Streamlining PopRock UI

The navigation has mostly been for me as I test the app so, sometimes, the top menu is two full rows of buttons so I can easily move around. The goal, however, is to make everything dynamic and intuitive. I’ve just started making that happen.

index.png

There’s no longer a menu to choose an artist from — the user goes to the main artist list (above, now the index.php page instead of being called allArtistsList.php or whatever it was) and clicks the artist’s name (I still need to make the images clickable) to open an artist page (combining the former list of popularity scores and D3 line chart representing those scores) that now includes a column chart of that artist’s albums’ popularity scores.

QueenArtistPage.png
Queen is plateauing despite wins from the Golden Globes and noms from the Academy Awards.

I still don’t know quite what I’ll do with those long rows of albums.

All these links are now based on URL parameters instead of cookies. Much, much easier.

On the albums list page, each album is a link to that album’s page with popularity scores for that album’s tracks. I want to replace that by making the album art on the artist page links to those album pages … is this getting confusing?

Removing the need for all these pages in the top nav makes room for other items like comparing artists and such.

compareTime.png
Comparing artists’ popularity over time. User clicks artist at bottom to toggle visibility in graph.

The goal for the line graph above and column chart below is two-fold:

  • At present, the genres page is just a list of all my artists and the genres Spotify assigns them. Soon, the user will be able to click the genre of an artist they like and it will open a page displaying a column or line chart of all artists in that genre.
  • Custom charts with drag & drop capability so user can choose artists to compare
compareCurrent.png
Right now, this uses a static array of Rock en Espanol artists.

Probably my simplest near-future task is making some buttons for the few “groups” of related artists I have for the following:

steveTaylor.png
This static array displays albums by all four groups Steve Taylor is in.
Advertisements

RoxorRescue for Disaster Search & Rescue

Graduating from the Mobile Web Specialist nanodegree program gave me the confidence to enter my first hackathon. The IBM Call for Code hackathon started at least two months before I heard about it so I’m only going to get a few evenings and weekend chunks of time in the now two weeks before the deadline but … I’m loving the project I’m working on.

Idea #1 would have required months of research and whatnot but it’s possible I could finish this (to some extent) in time to submit it.

RoxorRescue is an offline-first progressive web app using PouchDB and CouchDB. Submissions have to use IBM Cloud tools so I’ll be using Cloudant (for the CouchDB bit) among other products.

Here’s a concept for the GUI I made in Photoshop along with the current state of affairs.

Woo.png

It’s meant to be used on a mobile device and when I tested it there I was elated that the photo bit finally worked but …

notWoo.jpg

… a couple things stuck out … not the least of which was the inaccessible “Take Photo” button.

Post-hackathon, I’ll be welcoming any and all contributors during Hacktoberfest and beyond.

Lost My iShizzle

The iMac has been freezing lots again. So I updated El Capitan — not to Sierra, just updated the Capitan. Googling Sierra tells me there’s lots of freezing for that, too. Perhaps I should have stayed with Mavericks. Man … I used to be such an early adopter. All through the first several “cat” years of OSX.

Updating from .11 to .12 didn’t seem to work. Perhaps because the machine is so glitchy.

So I referred back to my Adobe CC and El Capitan post hoping those steps would help as much as they did almost a year ago. If memory serves, this nonsense also happened last time I was about to start some contract work.

Not only did it not work, but now the iMac dies during every attempt at rebooting. The progress bar hangs at about 50% for a bit, then the machine completely dies.

Trying First Aid in Recovery Mode

There are two “things” on the left (the second thing is an “image”) and each has a sub-thing. Three of them pass First Aid just fine but the first “sub-thing” (Macintosh HD) fails.

I tried using the Terminal in Recovery Mode to Repair Permissions but Ye Olde Terminal tells me there’s no such command as “sudo.” This worked like a charm last time. Is it because I updated? Or is the machine broken? As an experiment, I tried another command (I can’t remember now) which it also didn’t recognize. It did recognize “ls.”

One post I read said one could Reinstall OSX in recovery mode and it wouldn’t delete your files and such (I should really start using the external HD I have that sits next to the iMac) but when I tried that, it told me the disk was locked.

I found a couple great, in-depth posts somewhere and tried many of the suggestions with no luck.

No Genius Bar Love

Setting an appointment online is impossible. Remember when apple.com was considered one of the best-designed sites on the web? The most (but definitely not the only) infuriating thing about trying to set an appointment using their website is, upon clicking the desired time, I receive an error alert stating, “You haven’t entered a valid email address.” There is NO form or field for entering an email address.

Setting an appointment via phone is impossible. I call the store. Of course the voice recognition system doesn’t recognize anything I say. Eventually, it transfers me to Apple Care and starts asking me more questions about unrelated crap and doesn’t understand my answers.

Setting an appointment in person is stupid. You can’t drop off your computer and have them diagnose and/or repair it. You have to make an appointment to drop it off. You have to drive to the mall, make the appointment and then, later, go back to your car or back home, and get your computer.

It’s the Economy, Stupid

All these people who are unemployed. But businesses like Apple can’t afford to hire any humans to answer the phone in their stores? Walmart can’t find anyone qualified to operate more than three cash registers at a time?

Buy Local

Which brings me to the new computer repair shop on the corner … which brings me to my next post …

Gratitude

Fortunately, my “stupid day job” that I constantly complain about provides me with a laptop loaded with Adobe CC, etc. so I can still do my side job … every day I find another reason I should really be grateful for my “stupid day job” but I just can’t. Something’s wrong with me.

Is WordPress Trying to Suck?

I’m not one to complain, say, whenever something about Facebook changes. It’s free and we, the users, are not their customers — we’re the vendors who pay them with our data so we can use their free service and they can then sell our data.

On the other hand, I do feel like I’m a WordPress customer although I couldn’t really justify why I think that. Regardless, WordPress has become continually crappier over time. One frustrating, sometimes infuriating, change at a time I’ve grown to hate using it for blogging almost as much as dealing with it when potential clients ask me to help them with web design/dev and then, AFTER I agree, reveal they use WordPress instead of having an actual website.

UXUI Hall of Fame Welcomes Instagram

Their login form tells you into which field you typed incorrect info:

user-name.png

pw.png

As someone who uses multiple usernames and passwords, this makes my life so much easier and happier.

Just as with my gratitude for the IE feature mentioned in the linked post below, good UXUI is all about the little things that make the experience just a little bit better. Crimes against UXUI, however, seem to disproportionately make users much, much more miserable.

See Also:

UX/UI Upvotes #2: IE in Windows

Yes, you read that correctly. Nope, it’s not trolling click-bait. There is one Internet Explorer feature in Windows that I love and my default browser for Mac and Ubuntu does not.

In those latter operating systems, I have to click each tab (if it’s not the active tab) to reveal the close button and then click each close button. That’s two clicks per tab. Ew.

closeButt.png

In Internet Explorer (shudder), I need only hover my pointer over the unwanted tab and click the close button that appears. Yay. Shame on Firefox! Shame! Nothing in IE should ever be better than Firefox.

There used to be another feature in Windows that I was always surprised reigned supreme over Mac … ooh, I should put that in another post …

UX/UI Upvotes #1: Firefox Reader View

I shouldn’t just complain. User Experience and good UI design shouldn’t be one of those things you only notice when it is absent or doesn’t work.

Behold, the spinning blue circle thingy that spins while the page loads. It indicates a great many User Experiences That Suck. It might be warning you not to bother trying to click any give object because all of the objects will gleefully bounce around, away from your pointer as other newly loaded objects push them around the page. First down, then up, then back down, then up again, and so on.

readview
Spinny Blue Guy was still going strong after I opened my screenshot utility, took a screenshot, decided to take a timed shot so you could see the tooltip, waited the ten seconds, and then got distracted reading the article.

Firefox‘s brilliant and beautiful Enter Reader View button does this:

readerviews
Reader View changes the layout from the one on the left to the one on the right.

I want to touch on the two reasons the above example isn’t the best, so you can fully appreciate why those involved should be considered for sainthood.

  • The layout on the left is nowhere near as bad as it could be. There aren’t millions of items bouncing around and loading (they all loaded quickly and at once), there was no pop-up or modal layer advertisement to dismiss, and no video or animated commercials. Reader View hides all of those instruments of torture instantly without waiting for them to load.
  • On the other hand, Reader View sometimes doesn’t include pictures that are relevant to the article and which you’d like to see. But, in its defense, Reader View isn’t the only tool/feature to be frustrating when it comes to images. I can’t tell you how many times I’ve changed my mind about sharing an article simply because the thumbnail that lured me in isn’t the thumbnail Facebook (or whatever) chooses to display.

And this is a built-in feature, BTW, not an add-in! Go, Mozilla!

Update: Spinny Blue Guy was still doing its thing after I finished writing this post.