How to Re-Order Pages in WordPress

If you need to re-order the navigation in your WordPress menu, it’s quite easy to do.  Here’s how you can accomplish sorting the menu items:

  1. Log into your WordPress admin to enter the Dashboard
  2. click on the ‘Quick Edit’ link in the Pages view
  3. to the right side, you’ll see that each page by default is set to an order of 0
  4. click inside the input fields change the order numbers to be sequential, e.g, Home [0], Blog[1], About[2], etc
  5. be sure to click the UPDATE button after each change

Why’s it a good idea to re-order the navigation of your site?  Think of the user experience, and the fact that English reads left to right.  The normal hierarchy for web sites is to have the Home link at the farthest left; and then to continue in order of importance.  The last item in the menu, however, may or may not be the least important in the hierarchy.  For example, if the last item is the Contact Us page, it might be the least important in terms of content; then again,  your business might depend on customers being able to contact you.  In that case, being on the end could be helpful, in that it’s the last item your readers scan since they’ve read the items in the navigation from left to right.

It’s also helpful to consider the user experience in terms of storytelling: First we want to welcome them into our adventure (the Home or “Landing” Page; then we want to give them some details (Product Details); lastly, we want to give them an opportunity to connect with us at a deeper level (Contact Us or Blog or Social Media).

step 1 to re-order WordPress pages
in the WordPress Dashboard, select Pages; in Pages, select Quick Edit

steps 2-3 to re-order WordPress pages (navigation)
in Quick Edit view, change the Order number and hit the Update button to save

A Tale of Serendipity: iPhone Shortcuts & Bicycles

Recently, I found myself riding a rented bicycle down by the Santa Monica Pier. In an instant, as I rode behind my girlfriend, I realized I wanted to snap a picture of her. The picture would include the shadows of the underpass which played such a stark contrast against the fast approaching sun kissed beach path. I had to have that picture and it was out-of-the-question that we stop and pose it. That’s where the brilliance of the user experience design applied to the iPhone enfolds this story. Within a matter of about 3 seconds, I was able to accomplish the following left-handed, while continuing to pedal and steer my bike:

1) hit the wake-up button, i.e., Home button
2) swipe up on the camera icon shortcut that appears on the lock screen
3) frame my shot
4) snap my picture

Without the design including a shortcut to the camera in the lock screen, I would not have been able to capture my photo. The UX designers at Apple predicted my situation, probably by developing personas during the design process, and by conducting user tests. For this, I tip my hat to them and say “great f*cking job, you’ve made me a happy man”.

bicycling under the Santa Monica Pier
iPhone shortcuts help us capture serendipitous moments
bicycling and iPhone shortcuts
iPhone’s brilliant UX design allows us to use the camera while biking

Honda UI defeats Audi UI — with a Shortcut

One simple user interface (UI) feature that Honda has built into its car audio system has increased its ease of use and thus made it safer: the instant-on shortcut for powering up the radio. It’s a very simple shortcut that allows the user to skip having to hit the POWER ON button to get started listening to the radio. The POWER ON button is still there, and I actually used it for years before realizing the shortcut existed in my Honda Fit. For comparison, I tested a 2012 Audi to see if the shortcut also exists in that car’s stereo interface; it does not.

Noteworthy is how the architecture for the navigation changes when the shortcut is introduced. No longer do we have the POWER ON button being the supreme ruler over the other functions; rather, it has to share the leadership with roll with the AM/FM shortcut function. (see Diagram, below)

Honda Audio Navigation Hierarchy
Honda Audio Navigation’s Shortcut is Makes the User Inputs More Democratic

Software Smackdown: Balsamiq vs Keynote vs Omnigraffle vs InVision

  • Balsamiq Mockups for Desktop, Version 2.2.19
  • Keynote 6.1
  • Omnigraffle 6 Pro
  • InVision (cloud platform, 03-19-14)

Today I focused on creating the same low-fidelity iPhone 5 prototype in 4 different applications: Balsamiq, Keynote, Omnigraffle and InVision.

My end product was a login for an e-commerce store.  By developing the same clickable prototype in all 4 softwares, I was able to getter a richer understanding about which one(s) I want to fall back on when needing to rapidly prototype a product.

Here’s what i learned …

Balsamiq
pros:
• very quick & easy to learn

cons:
• have to drag/drop an image
• no mask abilities
• no layers (a workaround is to make an object “markup”)

balsamiq
awesomely simple and quick

 

Keynote
pros:
• very quick & easy to learn
• simply hyperlink buttons (versus creating “hotspots”)

cons:
• no iphone 5 artwork
• no layers: using master template is less intuitive then using layers

keynote
also quick and easy to use

Omnigraffle
tough to figure out, but quite robust
pros:
• has layers
• has precise info on grid positioning

cons:
• doesn’t come with iPhone 5 stencil artwork (only iPhone 4)
• in preview mode, I got an awful hover highlight over the entire main content
• hotspot navigation falters when using masked artwork in combination with layers

omingraffle
robust feature set, including layers

InVision
pros:
• very, very quick and easy
• don’t have to mask overflowing content, as the software handles it for you
• preview is phenomenal
• comes with iPhone 5 artwork

cons:
• no layers – so you might have to merge some artwork
• resolution is confusing (uploaded artwork gets stretched)
• can’t edit device once past the selection screen

invision
very simple for quick drafts, but tough to edit

=====================

THE WINNERS:
inVision and Balsamiq: both are easy to learn, with inuitive flows and ready-to-go artwork; thus, allowing us to focus on the task at hand (quick prototyping, low-fidelity) rather than thinking about how to use the software

Web Forms as Conversations That Don’t Suck?

In the words of Luke Wroblewski, one of the leading voices in form design, “forms suck”.  In my opinion, they are the most often used and inconsistent convention in the web and software realm. For that matter, RedBeacon – a service for finding contractors – has produced a compelling argument for forms that are conversational.  The forms on their site gently ask us to fill-in the blanks, or select from the suggested choices.  By serving up these forms that play on the metaphor of the form as a conversation, they also succeed in creating a human connection with the user.  And that’s a big success in UX — when we can make a user forget, even momentarily, that they are interacting with a piece of hardware, then we (as product developers) have  taken a step closer to creating a bond with them. Conclusively, if our product has created a bond with them, they are less likely to walk away from that experience thinking “forms suck”.

conversational web form
RedBeacon’s conversational form

Landlords Do UX, Too

Recently I moved into a new apartment, and I realized my landlord was practicing UX … probably without realizing it.  Simply put, he rented us an apartment that had brand new appliances – and he left all the “hey, I’m a new appliance” stickers and stuff in tact.  As I was pulling off the stickers and the plastic and tucking away the warranty cards, my enthusiasm for the apartment spiked.  I found myself feeling giddy, realizing I was proud of my new place, and confident with the deal we’d struck.  And actually looking forward to doing a load of laundry.  So, hey, landlord dude, good job, and thanks for the UX.
landlord_ux_50

Ask Matthew Magain: What the #$%@ is a UX Designer?

Thru the use of a very succinct animation, UX Designer Matthew Magain has defined the role of the UX Designer. You have to watch his video, but the key takeaways for me are:

  • ux refers to what, when, why, how and who of using a product
  • ux must also help the business achieve its goals; must hit the sweet spot where user needs and business needs overlap
  • tools are used by UX Designers to take the user’s needs into account during every step of the product life cycle (including mobile apps, web and even physical products)
  • ux design applies the scientific method to humans and their behavior in order to optimize the product
  • ux is the design behind the visuals: you don’t have to be a great visual designer to be successful in a job as a UX DesignerHe also defines what is means to have a career as a UX Designer, and encourages people to pursue it.Here’s a link to the video on YouTube:  What the #$%@ is a UX Designer

UX is Not Simply All About the User

Wouldn’t it great if we could just forget about making money, and about cost? Then we could concentrate entirely on making products that users love and enjoy. But really, that’s not the world we live in. Business owners (also called “stakeholders”) expect User Experience Designers to meet the needs of the business.

Thus, an additional notation to our definition of what exactly is a UX Designer must include the following: a synthesis between the needs of the stakeholders and the users. They should both get what they need out of the domain (product).

A wonderful book that helps define the role of User Experience Design is: About Face 3: The Essentials of Interaction Design, by Cooper, Reimann and Cronin.

Here’s a link to that book on Amazon.

What Exactly is a UX Designer?

Formerly a Front End developer who also advocated usability and accessibility, in 2014 I made the bold choice to pivot my career and become a UX Designer for good. For years I had been coding user interactions; prototyping animations (Zinio); architecting user flows in web applications (Harvard Lampoon) and all-in-all, advocating for web experiences that were delightful.

However, I was still titled a Front End or UI Developer (Walmart); rather than a UX Designer. And, of course, I was still expected to code web and mobile products – rather than design them.

Well, finally, in 2014, I discovered General Assembly, and it’s intensive 10-week, 40 hours per week UX training program and I’ve never looked back. The program combined theory with project-based UX activities; and we did this day-in and day-out for 400 hours, resulting in a collection of various UX deliverables – from card sorting results to personas to complex user interface prototypes.

This is my first blog entry, and throughout, I will make efforts to constantly clarify what the role of a UX designer is; and how company’s can practice UX on a day-to-day basis. It’s not simple; and should not be taken for granted. One of the most common errors companies make is hiring UX staff – but burdening them with extra roles, such as development or UI graphic design. Whereas those are fantastic – and necessary – aspects of digital products, they are often implemented at the expense of the user, i.e., the UX staff is busy visual designing and coding, rather then building malleable models and testing them with users.  Hopefully, by reading this blog, my users will embrace the same facets of UX design that I tout – and push push push for user advocacy – so we all find ourselves using delightful products regularly – not just every so often.