Category: User Experience

About those advertisements on Facebook

Posted on by ARSpaulding

I have a Facebook advertisement gripe.

I don’t really mind advertisements on the sides. Facebook is an incredible resource which we use daily and its free for us to use, but somebody’s got to pay for the servers and employees who provide updates and security patches along with many other resources. Advertisements are a necessary evil.

Sometimes, there’s something that I really like advertised on the side, so I click. Maybe that’s stupid of me, but I want to see that item, see how much it costs, etc.

The thing that gets me is that I cannot actually FIND the item in the picture. This devalues the… value… of the advertisement. If I click, I expect to find what I’m clicking upon. The image did grab my attention far more than the words (i.e. human nature).

What I’d really like is to have the ability to FIND the object in the image. This object may be far outside the price range that I’m willing to spend. Maybe it will be exactly what I’d expect for the object to cost. Either way, I want to find said object and have the option to buy it, see reviews, read comments about it, etc.

I don’t think I’m asking for much. What it really comes down to is relevancy.

If you are a company who is providing advertisements to bolster the attraction to your business, please do your potential customers a favor and provide relevant imagery to represent your business. This not only will bolster the attractiveness of your products, it will also increase customer loyalty and trust.

Embeding fonts – It CAN BE DONE! (I think)

Posted on by ARSpaulding

Lately, I’ve been head down shoulders-deep in work.  What’s new, right?

This project is…  – well, I can’t talk much about it (yet), but what I can say is that I’m very excited to see its launch and the potential progress throughout the future as it gets bigger and more people get excited and start using it.

 

One of the challenges faced, you might guess by my title, the use of a custom font.  Now, this isn’t a “new” thing across the web, quite a number of places do this – that being said, its not as common knowledge as one might think.  There are plenty of places out there which talk about how to do it, what can and cannot be done, etc. but I find that there are gross contradictions from one article and/or blog to the next.

I’m always up for a new challenge, but it seems that each time I find myself hunting after something which initially seems simple, it becomes quite complicated.

 

After much searching, I was able to locate a great resource that cleared a great deal of the fog.

Back in 2009, Scott Kimler posted on his family/personal blog  xBrowser Fonts

 

My goodness did his post help me a lot.  Between his post and a few others which elaborated on a few points that his touched on, I set forth to tackle this and wipe it out!

Here’s some of what I learned:

 

  1. Don’t use Microsoft’s eot font generator – the file it creates is quite large and can only be used where you set its allowance to – as in if you didn’t think about every last place its going to be used, it won’t work… for IE browsers, that is.  The other browsers don’t support EOT fonts
    • Instead, use EOT Fast – it’s easy to use.  just download it, unzip it, and then grab whatever font you want and drop it, literally, on top of the install file.  Vwalla, instant font creation.
    • btw: I feel that kudos should go out to microsoft for having an option for so long while other browsers only just  recently caught up to the wave of font embedding desires.
  2. TTF rules all – just about the rest of the browsers, except for IE, accept true type fonts
  3. Include the others: SVG for mobile, WOFF, for older mozilla browsers, and OTF – for just in case
  4. Syntax is EVERYTHING – if even just the tiniest misstep is made, it won’t freakin’ work.  It might for one browser, but it won’t for the rest.  This includes using the proper case for the format types.  The mac and firefox (on Windows 7) are quite particular about the proper casing of OpenType and TrueType.
    • @font-face {
      font-family: “My Super Font”;
      src: url (‘fonts/superfont.eot’);
      src: local(‘Super Font’), url (‘fonts/superfont.otf’) format(‘OpenType’);
      src: local(‘Super Font’), url (‘fonts/superfont.svg’) format(‘SVG’);
      src: local(‘Super Font’), url (‘fonts/superfont.ttf’) format(‘TrueType’);
      src: local(‘Super Font’), url (‘fonts/superfont.woff’) format(‘WOFF’);
      font-weight: normal;
      }
      .thisnewclass {
      font-family: ‘My Super Font’,Arial,Verdana,Sans-Serif;
      }
  5. It CAN work cross platform, including on a mac! (more on this in this blog)
  6. Without bringing in any jquery, you can have control over BOLD and ITALIC in your css
    • Notice how the example in #4 has the font-weight: normal?  What you can do is create essentially the same @font face (a second time), stick with the same font-family name, and have the call to the exact file location change to the specific font file   (often, its the same font name with a b added to the end of it’s name for bold and i for italic) then set the font-weight to:bold or :italic. �

       

      This will give you control in your css to call 1 font family, but to designate the font weight being bold, italic, or normal.  If you are desiring numeric weights, you’ll have to specify that in the @font-face rather than using the words “normal” “bold” or “italic”

All of that after quite a lot of hunting.  There are some great tools out there to assist in creating the different file types.  I’ll let you do some google or bing searching to discover them if you really want – just do a search for “embed font creator” or “embedded font generator” and you’ll find several options to choose from.

Currently, I’m faced with a perplexing issue.  As much as I can get all of these things to work across browser on a static piece, I’m running into troubles getting this to work when using a css tree system while deploying to Azure.  It could be the font, as it is a commercial font, or it could be azure, but I’ve gone through much trial and error  to get cross-platform viewability to work.  I’d assume that its not a font issue:  I was able to use the same font files, create a static file, and get those to work and view perfectly on a mac, but once deploying to azure…. no dice.  They instead revert to a font that’s stuck in perpetual BOLD mode.

I’ll continue hunting for a solution to this issue.  If I find that solution, I will update this blog post with the details.

Ok, Done, Cancel, Next… buttons

Posted on by ARSpaulding

In a post which I wrote previously, I talked about the power of the “done” button (among others).

I’ve recently been working on a lot of IA and am finding myself coming back to the essential contents on this post.  Along with this is the discussion between alignment of said buttons and orientation.

 

So many interfaces (including mobile devices) differ in the placement.  Even the organizational order of which comes first first next, if it’s left, center, or right aligned – all of which seem to differ.  I remember the other day being confused at the store when the touch-device upgrade changed where the buttons were… I ended up accidentally canceling a transaction because they moved the cancel button to where the enter previously was!  Do they really think everyone reads the buttons every single time?

A blog that I’ve read on a few occasion points to a very strong opinion on this based on user tracking Why ‘OK’ buttons … best on the right .

I feel that it comes down to contextual consistency.  There are some cases where anything which is a “moving forward” action item is on the left, at which point, that platform has made a consistent effort to instill the expectation for the user to locate anything which requires action to be placed in its own space on the left, as though the person was reading and moving to the next line.

Then there is the windows phone 7 platform.  This one goes all over the map, but always within the means of contextual navigation.  Related actions which bring you to new screens are centered and to the bottom.  Specific navigation within the context of the content delivered on the screen (such as going to contacts and then touching someone’s name to get to their profile) is directly delivered in-line, while sections of globally related content are a slide/pan left or right (think of a top-menu navigation on the web.  This would be a series of globally related content items – they relate to the website and support its purpose… hopefully).

Then there are installations of applications – this one is where I get my pantyhose in a bunch where the windows platform is concerned.  Every application seems to take a different direction.  Some have the buttons side by side, aligned to the right, but with the “next” button first and the “cancel” second.  Some have those buttons flipped, some have the next button all the way on the left where the cancel is all the way on the right…

There are so many variations!  Personally, it makes sense to me that if I’m going to the next screen, that I’ll look for the next button to be directionally placed – to the far right.  Where the cancel button is can differ, but this is where wayfinding comes in.  We as human beings use a whole lot of wayfinding metaphors.  They make the best sense considering where we’ve come from on an evolution sort of way.

What do you think?  Should there be a standard regardless of platform?  Is it contextual?  How would you make that decision if you were the one with the power to instill that decision – or do you even think about it?

 

Firefox's tab "groups"

Posted on by ARSpaulding

I finally did it – I allowed Firefox to update to 6.0

I don’t believe I’ve put it off for TOO terribly long, but I did continue to push the “update later” button until this morning.

 

Most of the time, when I update, I hardly pay much attention to the message by the Firefox reps regarding the update.  I’m just wanting to use the browser and consider the frequent updates to be a bit too frequent.  I understand, security risks are a factor as well as patching performance issues and implementing new user experience features, yadda yadda yadda.  By the time I finally push that button to update, I’m getting more than just 1 update, and am just looking for the notification to please just stop asking me to upgrade.  I’ve posted before about my disdain towards too frequent software patches, so I won’t go deeply into that topic here.

Like I said before, the button was pressed to update Firefox and for some unfathomable reason, I paid attention to their little welcome message illustrating what this update was about… and glad I am of that!

Being a creature of habit, I tend to go to the same places when browsing – so this new tabs group thing is very nice.

Whomever it was that came up with the idea to integrate this functionality into Firefox – should be given some serious kudos.  If they’re seattle based, maybe the company can pay for their parking for a month or something.

 

Anyway, I thought it worth mentioning.  Kudos to Firefox and maybe kudos to their messaging or marketing team who made the upgrade details screen stand out in such a way that I actually was inclined to pay attention.

UITrends.com hits it on the nose

Posted on by ARSpaulding

Warning: This blog post is more a rant than useful design/blend related

I was reading a site that I’d stumbled upon (ok, not quite stumbled, I was directed there by someone on the IxDA  discussion boards) and decided to read more than the person had posted their discussion thread about.

A few blog posts down, I find something that hits home for me pretty hard.  Updates on software.

In my every day work, I have updates coming at me from every direction.  iPhone updates, iphone app updates, Windows updates, winamp updates, windows media player updates, Adobe (everything) updates, quicktime updates, flash… ARG!

The “remind me” button is pressed on a few occasions – and by a few, I mean a few occasions a day.  I need to move forward with my work, but everything from iphone use to computer use, there are updates all over the place. 

Heck, on occasion I actually feel “punished” for updating as suggested.  One day, my iphone’s skype works great, and my twitter application is awesome.  I update, and suddenly, I can no longer make calls on skype from my iphone and my twitter now has advertisements along the top and sometimes it overlaps different people’s tweets requiring me to exit and reload the thing just to see everyone’s tweets.  I understand the need for the application development group to make money, but don’t break the app for the sake of advertisements, for crying out loud!

There has been one occasion where the updates were so entirely intrusive, that I just absolutely stopped using the software.  That’s you, Firefox.  That’s right – I stopped using you because every other day, you wanted to update.  Again.  and again.  – if I asked for a “remind me later”, then every time you loaded up, you’d have a pop-up starting firefox wizard that I had to go through just to use your dang browser in “safe mode”.  Bloody hell!  I just want to use the dang application already! 

Shocking as it seems, I switched to IE8, which I really never thought I’d do.  I have a completely illogical reason as to why I refuse to use Google’s Chrome.  In my opinion – choose a better name and stop confusing people.  Chrome is the dang thing around a Window’s … window.  Ever try having a conversation with multiple people where each one may have a completely different thought as to what you’re talking about?  Thanks google for adding greater levels of confusion.  So I litterally will not use it because of its name.  Perhaps that’s the worst reason for not using an app, but there it is.

Ok, so you get it – I’m frustrated about these dang updates and perhaps a little less logical than I’d like to believe myself to be.  Usually I’m the type to see a problem and come up with multiple scenarios that could be used/taken to understand the issue – which often leads me to find alternative means to reach a solution for the issue or at least a less intrusive meeting ground.  I’m a solution finder – drives some people nuts when all they want to do is vent.  (That’s what blogs are for!)

Unfortunately for this particular frustrating issue, I just don’t know if there is a good solution.  Perhaps if the team at Microsoft gave permission for 3rd party vendors to have their updates checked and added to the windows update catalog, that might help.  I’m  fairly certain it’d be a very chilly day in hell before that happens, but that is the only solution I can see that may actually pull back on the intrusiveness of the showering of update application requests, and even then – it would only take care of a percentage and might put Microsoft at risk if the updates aren’t managed by the 3rd party vendor well.

So like I said, I don’t really see a good solution to the issue, but it is an issue, and its seriously irritating.

The original blog that spurred my blog post can be found at –> UITrends.com

*rant off*

A great example of the discovery process to design

Posted on by ARSpaulding

When talking with someone who is interested in having me as their designer, some of the first things that I do is ask a million questions about the intent and the business that the design is to be representing.  Quite often, the person (or people) that I’m talking with don’t quite have a vision of everything that they need and/or want and that’s when the questions become fairly deeply digging to determine not only the “what” but everything that has to do with the design.

About 2 years ago, I went through this with the company that I am still working for when they decided to switch the software that their IT Servicedesk reps used on a daily basis to log their service requests.  Though the company had a fairly good handle on what the business needed, they didn’t quite have everything nailed down and that was where I was brought in to assist with the layout of the screens.  They’re not really “pretty” as the software that they chose isn’t really capable of anything remotely close to pretty, but the entire workflow  prioritization was discovered as were many other elements that were previously not possible with the old software that now, 2 years later, are still in place and used hundreds of time on a daily basis for the location of quick information while also providing the functionality for call logging and tracking.

This same process is discussed  in the link below – its a pretty well written article on the process that they went through with their client.  If you’re interested in reading just what goes into the discovery process of design, this would be a great article to read.