Front-End SUX – Pampers Gifts to Grow On Website

Now for another episode of Sarah on User eXperience (SUX)…

As many of you know, I am a mom – I have two boys who are going to be 3 and 1 very shortly.  I have one in diapers full-time and one who is almost completely potty trained.  I’m a Pampers consumer, through and through.  Their diapers and wipes have been pretty solid for me.

From a tech perspective, I’ve found their website to be a bit troubling at times.  I think the part that frustrates me the most is when I enter a code in a textbox for their Gifts to Grow program.  While I love earning points to redeem them for Shutterfly photo books, I get extremely apprehensive when I log into their website.  This is the problem that plagues me.

Here are the textboxes that make the user experience so frustrating:

Pampers Te

Let’s say I have a code to enter.  This morning, I tried entering: W6H9PRT66J4PG7.  There’s a problem though… I’m missing a between the 6 and H.  In theory, I should be able to put my mouse cursor at that spot, type the J, and be done.  That’s an ideal world.  However, that doesn’t work – any time I tried to click somewhere, it kept moving me to the end of the textbox.  This is a horrible user experience smell.

But the web developer me is really curious.  What kind of JavaScript are they tying to these textboxes, causing this headache?  So I did some looking around…

<input id="gtgRedeem:gtgCode1" type="text" name="gtgRedeem:gtgCode1" class="codeClass" maxlength="15" onblur="jsf.util.chain(this,event,'convertup(\'gtgCode1\')','mojarra.ab(this,event,\'blur\',\'@this\',\'gtgRedeem:gtgCode1Message gtgRedeem:js1\')')" onclick="convertup('gtgCode1')" onkeydown="convertup('gtgCode1')" onkeyup="convertup('gtgCode1')" tabindex="2" style="font-style: italic;">

So that’s how many JavaScript events causing this?

  • onblur
  • onclick
  • onkeydown
  • onkeyup

4 JavaScript events that could be screwing things up.  I’ll pretend I don’t see those Mojarra JSF references there.  It looks like the problem boils down to this convertup function.  Let’s see what that is…

function convertup(gtgtext) {

var fieldSelector = “#gtgRedeem\\:”+gtgtext;

var defaultval=$(fieldSelector).val();

if(defaultval == ‘Enter 15-Digit Code Here’ || defaultval == ” || defaultval == null){

$(fieldSelector).css(‘font-style’, ‘italic’);
}
else{

$(fieldSelector).css(‘font-style’, ‘normal’);
var upperVal=$(fieldSelector).val().toUpperCase();
$(fieldSelector).val(upperVal);

}

}

Resetting the value keeps moving the cursor back to the end of the textbox.  This is where the problem lies.  This is getting called on every blur,  every click, every keyup, and every keydown for this textbox.  So every action I take is firing off a JavaScript event that makes it impossible for me to put my cursor between that 6 and H.

How do we make this more user-friendly?

First of all, let’s get rid of some of these JavaScript events.  Do you really need to change the code to upper on every blur, click, keyup, and keydown?

Ideally, from a developer perspective, it makes more sense to let the server side handle changing the code to UPPERCASE before it checks to see if the code is valid and has been used.  If you really want the front-end to handle the uppercasing, handle it once onblur.

This has been a very frustrating experience.  I’m thankful I’m a technical person, as I can only imagine the non-technical parents out there who are experiencing the same frustrations.  Being technical, I can at least explain why their site sucks and how to improve it.  Now let’s hope that something positive can come from this!

MICROSOFT’S METRO MENUS ON A DESKTOP SUX!!!!!!!!!!

As I was writing this post, I was debating whether to include those exclamation points, but when I’m writing in ALL CAPS, I’m probably very angry and am using ALL CAPS and exaggerated punctuation to help get that point across.  So far, I’ve found 2 of Microsoft’s products to be great at yelling at the end users by using ALL CAPS for their menus adhering to Metro design standards of using ALL CAPS… oh, I don’t know what they were thinking when they went that route.  Thankfully, there are other people like me out there who realize how irritating and offensive ALL CAPS can be, so I wanted to share my findings with you, in case you too get ANGRY from looking at these menus.

Visual Studio 2012

Out of the box, Visual Studio 2012’s menus are showing in ALL CAPS.  However, with a simple registry hack, you too can disable this “feature” and get the menus to look somewhat normal.  For more details on that, check out Richard Banks’ post – “How to Prevent Visual Studio 2012 ALL CAPS Menus!

Office 2013

I am still looking for a registry hack for this.  However, sadly, the ALL CAPS menus were the first things I noticed when I opened an Office 2013 app.

Other Thoughts

While looking up registry hacks and other ways of disabling this annoying feature, it dawned on me that maybe this experience looks great on tablets.  However, for those of us who use laptops and desktops, this UX is definitely a tragic UX decision.  Perhaps Microsoft should come out with “Tablet Edition” versus “Desktop Edition” or maybe a simple check box to enable ALL CAPS since Windows tablets are still the minority for these products’ target platforms.  But to use ALL CAPS by default and hope your primary end users are tablets is a bit premature.  Just my 2 cents…

Sarah’s Must-Have Apps on Windows 8

Tonight, I got my Windows 8 RTM installed on a VHD.  I have to admit that I was skeptical of seeing the Metro interface that looks a lot like Windows Phone on a desktop.  I didn’t think I’d like the user experience, especially being on a laptop with a touchpad and no touchscreen.  The only thing I’m grumbly about so far is that it told me to install the Zune software to sync my Windows Phone with my PC.  Yeah, I don’t feel like ruining my fresh install (and my happiness) with that awfulness, so my phone will have to deal without a relationship to my laptop for now.

While looking around the Windows 8 Store, I found some apps that I just had to have.  These are some of my must-haves and why.

 

Xbox SmartGlass– This app encourages my laziness with the XBOX.  It’s bad enough that my 4 month old son hears me commanding the XBOX with voice commands thanks to my Kinect.  But now, while I’m tending to my little guy’s needs, I can also control my XBOX from my laptop with this Xbox companion app.  I no longer will startle my son with Kinect voice commands while he’s eating as I have this to control the XBOX.  Did I mention this encourages my laziness?

 


Microsoft Minesweeper – Oh dear… did I just recommend Minesweeper?  Yes, yes I did.  This is a game of the past that continues to get more awesome – complete with themes, achievements, daily challenges (coming soon), and yes, even an adventure mode (coming soon).  It’s nice to see how this game has grown over time to look better than the battleship grey sad thing it used to be.

 

 

 

TEDw – If you aren’t familiar with TED talks, you can find out more about these motivational talks on TED.com. This app puts recent TED talks right at your fingertips.  For example, when I look at the app now, I can easily access talks such as Rob Legato’s “The art of creating awe” and Timothy Prestero’s “Design for people, not awards”.  These are truly ideas worth spreading, and the TEDw app is great at spreading those ideas!

 

 

Microsoft OneNote MX – As I am writing this post, I have OneNote MX docked to the right with the list of apps that I’m recommending.  I’m a OneNote junkie – love using it to organize ideas and take notes!  So for me, I love keeping it docked while working on things to jot down that one idea that happens to come at the wrong time.

 

 

 

How Stuff Works – I love the site, and my father-in-law and husband are both huge fans of the How Stuff Works books.  Some random articles from the app include 5 Things You Can Do to Make Your Car Safer for Driving in Foul Weather, Does the Higgs boson exist?, How Hackers Work, and 10 Remarkable Exoplanets.  If you ever wanted to know how random things work, this app could probably quench your thirst for figuring out how things work.

 

 

 

Conclusion

These are some of my must-have recommendations for Windows 8 apps as of this point.  As time goes on and I stumble across more fun apps, look forward to future recommendations.  Meanwhile… do you have any Windows 8 apps that you recommend?  Either blog about it and leave me a link to your post or leave me a comment with what you recommend!  I look forward to hearing what others are recommending!

Our Technical Solution for the Baby Monitor

Many months ago, when I was pregnant, my husband and I were talking about baby monitors.  While looking at the ones already out there, none really jumped out at us.  Now, with both of us being geeks, we decided we’d evaluate our options here with the hardware and software available.  After figuring out that we had spare hardware laying about, we decided that we had to find a piece of software that could do monitoring.

Software Requirements and Test

Our requirements were simple:

  • Allow audio monitoring of the baby (video would be an added plus)
  • Desktop & mobile clients needed to be available – for both Android and Windows Phone

That first option was easy – there are plenty of conferencing and video/audio chat programs out there that would meet that requirement.  Now the second requirement, that’s where it got tricky.  My husband has an Android phone, and I have the Windows Phone.  Finding programs with Android clients is simple.  Finding programs with Windows Phone clients alone is okay.  But finding a client that works on both platforms – that wasn’t as easy.

Thankfully, Skype had a beta client for Windows Phone and already had a client out for Android.  We took it for a test spin to see how it would work, and sure enough it worked wonderfully.

Skype Setup

So… how did we set up Skype?

  1. Create an account for the baby monitor.
  2. Add ourselves to the baby monitor’s contact list.
  3. On the baby monitor’s Skype client:
    1. Click Tools
    2. Click Options
    3. Under the Call Settings section:
      1. Check Allow calls from… people in my Contact list only
      2. Check Answer incoming calls automatically
      3. If you want video, then also check Start my video automatically when I am in a call
      4. Click Save

The other thing we did at this point was muted the sound on the baby monitor’s client so that we wouldn’t have to mute ourselves every time and so that the baby wouldn’t hear us when we connected.
Portability
At the beginning of June, we went on vacation down to Outer Banks with a bunch of our friends and their families, and it was easy to travel with this setup.  We didn’t pack the netbook, as we had two laptops packed.  There were times where we had our baby in the crib in our room downstairs while sitting upstairs and playing games with the other adults.  We would log in on the baby monitor account on one of the laptops, run through the settings from above, and then call in from one of our phones.  This helped us hear our baby’s cries and tend to him while playing games.
Recommendation
Today marks 4 months of us using this setup.  While we both can’t be Skyped in at the same time separately – someone has to set up a conference call to make that happen – Skype has definitely worked well for us.  If you have spare hardware laying around, as well as need Android and Windows Phone connectivity, Skype works well for this!

Google+ Pages SUX

As some of you know, I’m one of the many people behind the various Stir Trek social media accounts.  Recently, I was asked to set up a Google+ Page for the event, and I figured… “I’ve set up Pages on Facebook before.  How painful could it be with Google+?”

Creating a Google+ Page

After seeing the Google+ Pages section off to the bottom right, I clicked that “Create a Google+ page” link.  Choosing a category was difficult… was I creating a page for the Stir Trek brand? The Stir Trek organization? When in doubt, go with “Other”.

After creating the page, I needed to customize the public profile.  This is where things got tricky.  If you haven’t seen it, the Stir Trek logo is rectangular:

 

StirTrek2012logo

However, Google+ wants a square.  Google+ – It’s no longer hip to be square.  I really wanted to capture both the name and the Avengers “A” (as this year’s movie is The Avengers).  I ended up settling with just the “A”.

All My Life’s a Circle

All these geometric shapes but not a rectangle!  My next idea was to set up circles for the organizers and this year’s speakers.  So I went about creating circles much like I did for my personal Google+ account.  With the circles created, I was ready to add people to them.

 

image

Really?  Hmm… I had tried adding organizers first but nothing worked.  I started following the Stir Trek page on my personal account and then tried adding myself to the Organizers circle.  That worked.  But adding anyone who hasn’t added me didn’t work.  Time to invite others to follow the Stir Trek page so that I can come back here and add them to my circles.  Well so much for getting people in their circles before telling people about the page.

A Picture’s Worth 1000 Words

The one thing that seemed quite intuitive and easy to work with was the Photos section of the Page.  I was able to create albums for past Stir Trek events and upload pictures without any problems.  So if you want to see things such as the theater posters that our sponsors had designed for last year’s event or even the picture of transporting 50 dozen Krispy Kreme donuts, you can check them out in the Stir Trek Google+ Page’s Photos gallery.

A Mostly Frustrating User Experience = Unhappy User

These experiences are just some of the headaches I’ve had with Google+.  It probably doesn’t help that I really haven’t adopted the Google+ platform personally – while people claimed that it would replace Facebook, I’m finding Facebook slightly less painful to use.  However, because we have it set up, I will periodically post updates to the Stir Trek Google+ page and hope that my Google+ experience turns more positive.

Microsoft Billing and Account Management SUX

Recently, I wanted to manage my billing options, as I had an invalid credit card tied to my Zune and XBOX Live account.  Unfortunately, I had the experience of meeting the Microsoft Billing and Account Management site.  This is unfortunate, as it is a site with horrible, HORRIBLE user experiences.

Select from Account IDs 

Yes, somebody didn’t get the memo that exposing accounts as account IDs really is a bad user experience.  Let’s see what I have…

  • Acct ID# 00000-00000-00020-12345 (Personal)
  • Acct ID# 00000-00000-02300-12345 (Personal)
  • Acct ID# 00000-00000-02412-12345 (Personal)
  • Acct ID# 00000-00000-02460-12345 (Personal)
  • Acct ID# 00000-00000-00302-12345 (Business)

Now those aren’t my real account numbers, but these are the options that I’m given. I have no idea what any of these account IDs mean. What’s better… in their respective applications, I don’t see these IDs. So why are you showing them to me as an option? Why couldn’t I get options that look more like the ones below?

  • Hotmail Plus (Personal)
  • XBOX Live (Personal)
  • TBD TBD (Personal)
  • Platform Services (Personal)
  • marketplaceformobile.somerandomstring.US  (Business)

I have no idea what some of these are even for – especially if there’s no service listing for that account.  And TBD TBD… no idea what that even is let alone why it appears there.  Some of these are even cancelled services, so why would I care to manage their Billing if I don’t have them anymore? (Edited note: Talking with my husband, we think this might be a migration of multiple billing systems into one, which could only lead down an ugly path.)

Now one of my accounts looks like it manages my XBOX Live, Zune Pass, and App Hub accounts.  So maybe coming up with friendly names for the accounts is a bit harder for their devs… how about letting the end user create friendly names for those accounts rather than showing them Acct ID# 00000-00000-00020-12345?

Disconnect in Payment Data

I went through the process of removing the invalid credit card from my Zune and XBOX Live account.  Looking at this in the Billing portal though, I see that this card has been marked as Removed on my cancelled MSN Hotmail Plus account. If I switch to my XBOX Live account, I see that same credit card listed, without being marked as Removed.  Really?  Mind you, under both accounts, it shows as Xbox Live (Visa: xxxxxxxxxxxx0000) – same exact name.  Why wouldn’t show as Removed on the XBOX Live account?

400 Clicks Later

As I mentioned on Twitter today, I was having other issues with my Zune account where credits weren’t showing.  Thankfully, @ZuneSupport and the Zune support chat team were able to find a solution that works for my needs.  However, I had Tweeted that I had hoped I wouldn’t get sent to the Microsoft Billing site as it was a headache user experience.  Leave it to one of my friends to point out that there’s the joys of clicking through a lot of screens to get the data you need.  Boy was she right!  Even the context-driven FAQs on the right of each page… click, click, click… ah there’s what I need… maybe.

Conclusion

I hope that one day Microsoft will invest in a great user experience team that can go through their websites and find these problems before we do.  At the moment, there are a lot of painful user experiences on their sites that I use, and the more I have to use these sites, the more I’m tempted to look at alternative solution providers or weigh the cost of abandoning my current services just to get away from these bad experiences.  Painful user experiences are what drives users to competitors who get the user experience right.  Please, Microsoft, save us from the painfulness known as your billing site by working with UX experts on making it easier to deal with.

Exploring Office Productivity Suites…

In August, I became an independent consultant, which meant that I needed to figure out how I was going to use software in my day-to-day job and how I was going to afford it.  Software licensing can be a costly thing, but thankfully I have another company looking after me on some of that.  The one thing I really wanted to look into was office productivity suites, as I wasn’t sure that a Microsoft Office product would be right for me at the right price.

Microsoft Office 365

My husband works at an IT company that deals with Microsoft BPOS and Office 365.  Thanks to him, I learn about Microsoft products that I as a developer would normally not care much about but that I as a business owner may care about.  Office 365 was one of those.  Since there were trial subscriptions for their various plans, I tried trials for two different plans – one that gave me the cloud based stuff and one that included Office Professional Plus.  Here are my initial thoughts:

  • A cloud-only version would not work well for me, as there are many times when I may be on a plane or just disconnected from the Internet in general and want to work on my documents without that tether to the cloud.
  • While I like that it has Office Web Apps, it also has SharePoint (which I wouldn’t use, as I prefer other tools), Lync, and Exchange (which, to me, doesn’t make sense for a single user company).
  • The Office Professional Plus was nice:
    • It was handy for when I had to work on a client’s Access database.
    • Having Office available when disconnected from the cloud was handy.
    • OneNote… such a great way to organize thoughts, links, receipts, plans in general
  • The licensing scheme is typical of Microsoft –  P plans versus E plans.

I would like it if it were more a la carte – give me the cloud part plus Office Professional Plus, minus SharePoint, Exchange, and Lync, and I might be good.  Otherwise, for me personally, there’s a lot of fluff and confusion and not really something for me.  I also didn’t like the idea of setting one of my domains to point to their services – as a long time web developer and domain owner, there are some sacrifices I’m willing to make but moving my domain to point to a SharePoint site didn’t settle well with me.  (SharePoint is a great option for some people, but it’s just not my personal cup of tea.)

However, if you’re looking for this combination, I can recommend a company in Cleveland to help you decide what plan may be right for you.

Note: After letting my Office 365 trials lapse, my Office Professional Plus license also expired, as expected.  There does not appear to be a nice way to upgrade Office Professional Plus with a registration key.  The help file says to contact your system administrator (which is annoying when you are the administrator).  After talking with my husband, there may be 2 spots to edit this – Add/Remove Programs (yay for Microsoft intuition) or the registry.  There isn’t an option under the Help menu like where most Microsoft activation and registration dialogs live.

Microsoft Office (standalone, no cloud)

I’ve been working with Microsoft Office products for a long time in my development career.  One of my first programs while learning VB was learning how to get it to talk to an Access database.  I was used to writing school essays in Word documents.  My drafts for my book were written as Word documents.  My presentations have been done in PowerPoint.  My email – at least 6 accounts – has been in Outlook for awhile.  Microsoft Office, for me, was like my fleece blankets in the winter – something that has kept me in my comfort zone.

However, after that Office Professional Plus expiration after Office 365 trial expired, I was not happy with that user experience.  It made me think that Microsoft Office was more like that holey pair of jeans that I’ve been meaning to get rid of.  On top of it, Office’s licensing model seemed to be pricey to me.

OpenOffice.org

After realizing that I wasn’t content with licensing models or prices, I remembered that there were open source alternatives to Microsoft Office.  After all, I was working on a keynote for Software Freedom Day 2011 here in Cleveland talking about open source.  Going back to my Linux roots, I remembered OpenOffice.org and figured I’d check it out to see how it works.  Here were my thoughts:

  • If I work with a book publisher again, it’ll be in my personal VM, which has Microsoft Office through my MSDN subscription (for personal use, not for my business).
  • While I can access the Access data by converting it in OpenOffice Base, I won’t be able to deal with Access databases in their MDB format.
  • I can still write presentations, using OpenOffice Impress.  I used this to write my keynote slides.
  • While there’s no mail client, I can always find a separate email client.  This isn’t a must-have but a nice-to-have.

While working with OpenOffice.org, I found myself missing Outlook.  However, a quick tweet yielded an Outlook replacement – Windows Live Mail!  Other than missing Outlook, I felt fine using it – and I can save their files to other formats if need be.  For example, for my keynote, I made my slides available via both OpenOffice’s ODP format and the PowerPoint format.

Conclusion

For me, as a small business owner, I personally find more value in spending money on training and on partnerships with the right teammates rather than on an office productivity package.  The cloud wasn’t something for me, as I preferred to be detached.  After re-evaluating my situation and taking a couple office suite setups for a test drive, I think OpenOffice.org plus Windows Live Mail is the right decision for me.  In this case, the least confusing licensing model, the cost, and the best value for my investment  were the deciding factors.  Does this mean I’m anti-Microsoft? No.  This just means that, as a business owner, Microsoft is a potential vendor but may not always have the right solution for me.

Spam SUX: Chase threatens…

Waitress: Well, there’s egg and bacon; egg sausage and bacon; egg and spam; egg bacon and spam; egg bacon sausage and spam; spam bacon sausage and spam; spam egg spam spam bacon and spam; spam sausage spam spam bacon spam tomato and spam;
Vikings: Spam spam spam spam…
Waitress: …spam spam spam egg and spam; spam spam spam spam spam spam baked beans spam spam spam…
Vikings: Spam! Lovely spam! Lovely spam!
Waitress: …or Lobster Thermidor a Crevette with a mornay sauce served in a Provencale manner with shallots and aubergines garnished with truffle pate, brandy and with a fried egg on top and spam.
Wife: Have you got anything without spam?
Waitress: Well, there’s spam egg sausage and spam, that’s not got much spam in it.
Wife: I don’t want ANY spam!

– Monty Python’s Flying Circus

I feel a lot like the wife in the Monty Python Spam skit.  I don’t know about you, but I don’t like spam – be it from someone I used to do business with, someone I’m currently doing business with, or even someone I may deal with in the future.  Though if you want to deal with me in the future, you’re smart enough not to spam me in the first place.  Lately, though, there have been some reputable companies that have been turning to spam that have made me sad and made me wonder – When did spam become an acceptable business practice?

Definition of Spam

Taken from Encarta, via Bing:

Definition
spam
NOUN
spams plural
1. electronic junk mail: an unsolicited, often commercial, message transmitted through the Internet as a mass mailing to a large number of recipients
TRANSITIVE AND INTRANSITIVE VERB
spammed past and past participle
spam·ming present participle
spams 3rd person present singular
1. send unwanted e-mail: to send an unsolicited e-mail message, often an advertisement, to many people
2. post unwanted electronic messages: to post a message many times to a newsgroup, or an inappropriate message to multiple newsgroups

Let’s see… words that stand out there – unsolicited, unwanted, and inappropriate.  That describes the piece that I am covering here in this post.

Chase – Threatening to Spam

This was piece of mail that we received at home, telling us that Chase realized that we weren’t on any of their mailing lists and that they were going to start mailing us all sorts of stuff unless we opted out.  Really?  My husband and I each got a copy of this letter – so count the postage on both to be sent out, the paper to print said letter, the trees that were killed unnecessarily.  Apparently one of the guys I follow on Twitter had this same experience:

 

Chase letter: “You are not being mailed any of our product spam. Circle the products you DO NOT want to receive by mail, sign & date.” #Evil
Nov 02 via TweetDeckFavoriteRetweetReply

Really, Chase, when did it become acceptable to realize you weren’t mailing your customers and figured it’d be good to warn them that you’d be mailing them if they didn’t opt out?  Rather than taking that approach, why couldn’t you have said, “We have {such and such services}.  If you’re interested, please fill in the circles of those you’re interested in.”  Sad state of affairs when you’re forcing people into your programs and making them opt out rather than taking the opt-in approach.   Customers really don’t appreciate that kind of business.

Problem with Telerik’s recent geekette shirt…

I have no problem identifying with being a geekette (as is obvious with my domain name). However, I do have a problem with one of the more recent geekette shirts to hit the public (this one courtesy of Telerik):

Most geekettes I know dress like a typical geek.  We like our hoodies and geek tees just as much as the guy geeks.  Places like ErrorWear ThinkGeek, and SnorgTees cater to geek wear for women very well.

Sure, some of us have our girly moments of dressing up in dresses or shirts and skirts.  However, most of us tend to try to blend in with the crowd.  We don’t like being singled out by our gender and like being able to compete with other devs without the gender factor being brought up.

Not all of us are hourglass figures, as depicted in this new Telerik design.  Not all of us like to show off our *ahem* assets *ahem* as depicted in this design.

A friend’s husband called this design “slutty”, and I can see where he got that from.  I am not a fan of this design, and I would not encourage others to wear it.

This makes me miss their older geekette shirts:

Geekettes from Ann Arbor GiveCamp 2008

Please, tools makers, keep making tools but don’t be tools who create geekette shirts without really thinking them through.