User input is what drives a lot of conversion points on many sites. Whether it’s signing up for an event, sending a donation, purchasing a product, or dropping a comment, user input should be a very fluid part of your UI. Responsive Web Design (RWD) can throw some wrenches in the works for user input when you have to tailor to many different devices and input methods.
When it comes to user input, touch devices are an area we should all focus our attention. With the ever increasing numbers for mobile traffic, touch devices are a growing area.
The type attribute is an attribute that helps the browser or device software recognize the type of input your interface is looking for. It provide the user with a different set of controls based on the property of the attribute.
Keypad with Type
The type attribute on an input can help direct a device on how to let the user interact with your site. By specifying
type="tel", the device knows to bring up the appropriate keypad for the user to use. This aids in the ease of use for the field. Other helpful type attributes are email and search, and should be implemented on all applicable fields. For a complete list of type attributes, see MDN for reference.
Keypad with Input Patterns
Sometimes we have an input that does not match any of the HTML5 type attributes, but we still want to provide the user with a different keypad for easier input. A good example of this would be a credit card number. Using the “number” type for a credit card can actually cause issues because Safari and mobile Safari tends to round large numbers, so stray away from this. Instead, a credit card isn’t really a number, but a string or digits, so the “text” type is most appropriate.
In order to bring up the appropriate keypad, we need to use the “pattern” attribute. The pattern attribute is a regular expression (regex) for the pattern of the input. You can specify numerical input with the
pattern="*[0-9]" pattern, which will bring up the keypad for your user. This is also helpful for US postal codes as well.
Validation with Type
Another advantage to the type and pattern attributes is with HMTL5 validation. Setting the property type can help the browsers or devices recognize the value of the input and check it against a set of criteria. For example, the validation can check to see if the value a user added into an input with type “email” is a valid email address. On the other hand, if you use the pattern attribute to specify a numerical input, the validation will flag alpha characters as invalid.
Input zoom is another area I often see overlooked when it comes to UX on touch devices. Some touch devices like the iPhone will zoom into an input that has focus. This can help the user see what they’re typing better, but can get tedious if you have to fill out a long form. I find it best to disable this behavior all together. If your site is built mobile first and the font size is 12px+ the user should be able to see what they are typing just fine.
from User Input UX
One of the biggest gripes I have with designers when implementing a design with HTML/CSS is font sizes. Often when presented with a PSD, it’s filled with dozens of font sizes and font variations, some slightly different than the rest. Upon implementing the design, however, I consolidate all font sizes in 8 different styles:
- 1. Body Text (p, ul, ol, etc)
- 2 – 7. Headings (h1, h2, h3, etc)
- 8. Intro paragraph
These eight sizes, with the exception of modifier elements like
small, sub, sup, etc, should cover all font sizes that appear on the site. This can easily be achieved with the help of a styleguide. A styleguide is something you and the designer can work on together to establish these elements and utilize them, and only them, in the design.
Creating this visual consistency and hierarchy helps the user understand the language of the site. It allows the user to visually interpret the level of importance of pieces of content. By making your content easier to read and interpret, you achieve a better user experience, that’s not bogged down by aesthetics, but rather a well-designed visual system.
Has your site fallen into this dilemma? Open up your compiled CSS file and grep for “font-size.” How many results turned up? I’d say anything over 25 and you need to consider having a talk with your designer. The number 25 might get skewed a bit if you’re using an icon font, but page through your results and see what you can uncover.
from Narrowing Down Font Sizes
I love working as a front end developer. The time has come, however, to think about the future and the opportunies for growth. I’m currently at a senior level position at my current job, leading my semi-agile team’s front end workflow as well as managing a junior developer. So what’s next?
User Experience (UX) is a multidisciplinary, multifaceted branch of the web that includes UI design/development, user testing, research, and information architecture (IA). My focus would be mainly UI design/development, leveraging my knowledge of RWD and front end technologies to craft interfaces that perform well, but are also easy to use and understand. I’m excited to be able to build prototypes and wireframes that solve problems based on user research and testing.
While I’ll still continue to freelance as a WordPress developer (because WordPress is awesome), I look forward to starting this new phase of my career and writing more about what I’ve learned.
from A New Leaf: User Experience
TLDR; Web Design is open to interpretation, and the physical Photoshop designs are merely a guide. Live data, responsive web design, and CSS authoring all play their roles in deconstructing the ideal scenario on which the design was built.
WTF is Hermeneutics?
Hermeneutics is the theory of the interpretation of written, verbal, and nonverbal communication. One of the best ways to describe hermeneutics is with the interpretation of the Bible. Some sects of the Judeo-Christian faith believe the story of Adam and Eve in the book of Genesis to be fact. Others, however, see the story as a parable of humankind’s fall from grace.
Another example might be the Declaration of Independence. In which Thomas Jefferson writes, “all men are created equal.” Putting aside that this group does not include women, back then it didn’t include our current standards of “men.” Back then, slaves were given 3/5 the weight in political representation.
Physical text aside, hermeneutics can expand even further to all forms of communication, and ultimately drives at “how we know what we know.” If all forms of communication are open to interpretation, how can laws or other tenets of society exist?
Hermeneutics and Web Design
It seems that in no point in web design history has the gap between designers and front end developers been any greater. While there are many cases of people who can span both worlds, most web designers come from a more traditional print/graphic design background. As colleges and universities struggle to update their curriculum to the rate at which web technology changes, this may be a problem for years to come.
With the advent of responsive web design (RWD), there have been many attempts to move away from traditional Photoshop designs and into a more interpretive approach. Style Tiles, designing in browser, even programs like Macaw which try to bring the experience of Photoshop into the browser.
So why the sudden shift? Because the web is fluid. Content changes from page to page. Items and links need to be optimized for touch devices (44px x 44px). CSS shouldn’t be written for a page by page basis, but as a global, modular cascade.
Taking all this into account, Photoshop designs become open for interpretation. If the designer used a certain shade of medium gray on the homepage, and a different hexcode on the about page, I think we can agree that those grays can be consolidated into one. If the designer is being lax with having 9+ different heading and text styles, let’s consolidate them down to 8 for heading 1-6, body text, and intro text.
In the end, both parties want to make the best product possible, and there needs to be concessions made for whatever is best for the user. If the user is already frustrated because of the page load time due to the 10 high res image slide on the homepage, are they really going to feel better when they see your “creative” layout with the chevrons you’re so proud of?
So what do you think? What’s the best solution moving forward? Any horror stories to share?
from The Hermeneutics of Web Design