Thursday, October 27, 2011

Blog Post #8: What is Semantic Markup?

What is semantic markup? Why should web designers use it? Why is coding "meaning" into the structure of a document important? How does this make the document more accessible and search engine friendly? Why do many designers seek to separate structure from presentation? Can you write examples of how designers might accidentally ignore semantic markup and/or how it should be applied?

Semantics has to do with the meaning of things, and is a topic of considerable importance to people who are much more into literary theory and criticism than I am. Mostly it is discussed in literary criticism like Ferdinand de Saussure's famous work Course in General Linguistics.

Semantics also indicates meaning in term of HTML markup. Basically, it is markup that provides some meaning. It mostly has come about in the more recent versions of HTML (HTML 4 particularly, not sure about HTML 5, but since HTML 5 seems to favor eliminating DIV tags in favor of more specific tags like <header> and <section>, I imagine it also supports semantic markup), in which many of the popularly-used "presentational" tags (i.e., ones that didn't have any meaning besides presentation) were deprecated. This may also have to do with the rise of CSS, since CSS's raison d'être is to take care of the presentational stuff.

I confess I don't know much about semantic markup, but it seems the best reason for using semantic markup is that it is "HTML that describes the content" (as the BBC Guide linked to on the class site says). This, according to the BBC guide, helps avoid browser compatibility issues and also separates presentation from content, which is becoming a more desired idea thanks to the increasing adoption of CSS. I suppose it would also be useful to any non-tech savvy person who might have some reason to be looking at your code. Doing this also would probably help your code stay cleaner (much the way, as I'm learning in MAT 225, coding PHP to do certain things can make your code cleaner because all the PHP is stored server-side and not seen by the client on the other end).

Encoding meaning into a document would make it more user-friendly because it would take into consideration the fact that readers online often scan rather than read articles and so on. It would also make it easier for search engines to index you in a meaningful way (though doing something like submitting a site map to Google also helps).

I think designers seek to separate presentation from structure in HTML because CSS is capable of taking care of all, or pretty much all, of the presentational stuff anyway. And since an external style sheet allows you to control the whole site's style in one document, this allows you to cut away a lot of the frills from the HTML that are no longer needed.

The BBC guide suggests tags to avoid when using semantic markup. These include the deprecated bold and italic tags (<b> and <i>), which apparently don't mean anything (though I'm not sure how their replacements, <em> and <strong>, mean anything either). Some of the tags they suggest not using make sense though, like <strike> for striking through a line to indicate a change (no one really does that anymore anyway, that I know of) and the purely presentational tags <blink>  (blinking text, even when it was popular to use the <blink> tag, was generally found to be rather annoying anyway) and <marquee> (which basically let your text scroll like a New York stock ticker...it was fun for a while but I don't think anybody does that now either). CSS, Javascript, and PHP can probably take care of any of those things anyway.

Semantic markup should be applied where it is needed, especially in cases where the tag you might use for something is deprecated as a presentational tag. It's probably the best choice in any situation though, really.

I'm sorry I can't find much to say on this. Goodbye for now. Bonsoir!

Wednesday, October 26, 2011

Blog Post #7: Experience Design

Many designers have found a rigid focus on usability design stifling to creativity on the Web. The incorporation of experimental navigational systems, animation, sound, high-end graphics, and multimedia elements are often left out of sites who focus on fast-loading pages and making things as easy as possible for the user. However, as broadband connections become increasingly common, so too have many designers become increasingly interested in creating user experiences on the Web; sites where users can do more than simply read a brochure or shop at a store. Companies and designers are discovering that the Web can also be a place for drama, emotion, and a branding experience. Such designers are working in a relatively new design area sometimes called "experience design."

In your own words, define experience design. What considerations would be important for you as a designer if you were designing a site that focuses on "experience." Can you find a site that is a good example of experience design? Why is it a good example and how does it differ from other sites? Like debates between form and function, designing for experience and designing for usability are frequently put at odds. Why is this? Do you think they are mutually exclusive? Or, can they coexist in design?


This is sort of the flip side of the previous post. The previous one was about usability, whereas this is about those who finds usability restrictions squelch creativity.

I do kind of agree, designing to make a site meet strict usability guidelines might take some of the fun out of web design. I'm better with creating content than with the visual design side of things right now though, so I might not mind so much personally, though I'm sure some of my visitors would.

For me, a site that focuses on "experience" would be one that has a lot to offer the visitor but isn't so flashy that it's overwhelming. A person doesn't want to be bored on a website, but they don't want to be overwhelmed either. This is particularly true for me because I am autistic, and autistic people are highly susceptible to sensory overload. A site's that too flashy might also be difficult for those with other sensory processing disorders, people who are easily distracted or who have disorders like ADD, people with visual disabilities who are using screen readers, and - if flashing pictures or lights are involved - those who are prone to photoelectric seizures. I also dislike sites that are flashy visually and have some kind of audio or music that autoplays when you arrive at the site. That can be a lot for me, especially if there is no obvious way to turn the music off, and particularly if it loops AND can't be turned off easily. I also find some custom cursors distracting - they can be fun but sometimes I may not want a trail of sparkles following my arrow around. (The music problem seems primarily present in older sites where people used MIDI files as background audio for their sites. This used to be the cool thing to do once upon a time. Now I think people have moved on).

Why are designing for usability and designing for experience at odds? I think for much the same reason rational scientists and not-as-rational artistic people end up at odds - those in each camp have different ways of thinking about how web design should be done. It's like those literary theorists who only care about the text and what you can get from the text itself (sometimes called the "the author is dead" camp because they evaluate the text on its own merit, ignoring the author) versus those who want to evaluate a text based on the author and his or her background, society, culture, reader's response, feminist views, etc. They just can't agree to disagree, so they butt heads. As I mentioned before, both viewpoints have merit. Which one is the better one remains to be seen. And at any rate things in the tech world are constantly in flux anyway. So I think they can peacefully coexist, if each group would stop making such a big fuss about the other's view.

And now, some examples of "experience design":

  • Erin's Challenge! I Can Speak Japanese, the site I reviewed in my first post. That site provides a very full experience to anyone who wishes to learn the Japanese language. It's even been used to teach Japanese in a classroom setting, as their trailer in that post shows. And while it uses a lot of Flash, the overall design of the site is pretty minimalist, so it isn't too overwhelming.
  • StarWars.com - The most recent version of the official Star Wars website is VERY streamlined. Yet the website still provides a lot of things for the user to do, the perhaps best well-known being the site's encyclopedia, which is the most detailed resource on Star Wars I've ever seen. One of my fave Sailor Moon websites, moonkitty.net, took its redesign cue from StarWars.com when trying to streamline its home page, but I think it still has too much distracting stuff in the sidebars to make the idea really work.
  • The Great Gatsby - For NES - I was introduced to this site by a classmate in my American Lit 2 class, in which we were reading The Great Gatsby at the time. While the site does not provide a huge amount of user experience, just playing the game is fun in itself. As anyone who has read The Great Gatsby would know, it doesn't really have the kind of plot that would probably translate well to a video game, but somehow this game makes it work. And while it appears to have be a fan-created game (despite what the actual website says about it being on a NES cartridge the creator found at a yard sale), it does look like a real NES game and is pretty fun to play once you master the controls (which took me some time to do). 
That's all I really have to say about that. Until next time!

Tuesday, October 25, 2011

Blog Post #6: Usability

Long time no see! This time the topic is usability.

Prompt:

There is a lot of talk in the web design community about user experience and usability design. What is usability? What is meant by usability testing? What considerations are important for you as a designer if you were designing a site that focuses on "usability."

Can you find a site that is a good example of usability design and/or that provides resources or insights into usability?

Usability is defined in web design as making a site user-friendly. It might also encompass making sites accessible for the disabled, I guess. In short, you want to make your site "sticky" - a site that people will stay on for a long time. And people don't stay on websites a long time in general, because we're by nature not very patient. Then there are those people - myself included - who just get easily distracted (the old "'OOH Shiny!' ADD" problem). And other times people don't want to think a lot when they visit a website, for whatever reason. Maybe they're just impatient, or maybe they're tired or in a hurry.

I had a usability problem recently myself with a website. The site in question was the website for the Alliance Française de San Diego. Having received an e-newsletter from them (I guess I subscribed when I took their online placement test) which said the AF would be giving the Test d'Évaluation du Français (a French proficiency test), I e-mailed the person I needed to e-mail to indicate my interest in the test. They e-mailed me back the day before the registration deadline to send me the proper form, and indicated I could pay for the test online if I wished. I went to their website to do so, but could not find any page on which I could pay for my test. I began to panic, thinking I would miss the registration deadline for this test too, as I had for the TCF (Test de Connaissance du Français). It turned out that no page for certification test registration exists as of yet on their current website, which is still being set up. I was told however, that I could pay by submitting my payment under "donations" for the time being, which I did. This worked out, and I just took the test today as a matter of fact!

My issue with the AF San Diego website is that I spent so much time searching it for a page I wasn't aware did not yet exist. I can forgive them slightly as their website, in its current state anyway, is still a work-in-progress (it's an even newer site than the mostly unfinished site I took my placement test on several months ago). But I do think if they want to make a point out of being a qualified testing center for the TEF and TCF, both exams recognized by the French Ministry of Commerce and Industry, they need to make a page/section on their certification exams a priority. And to be honest, I don't know who's doing their web design, but based on the layout the site appears to be WordPress-based. If so, it would not be too difficult to make a page featuring their certification tests. But I have had a good experience with them by phone, e-mail, and today when I took the test, so I really shouldn't blame the people who work at AF San Diego. How their website looks - and how non-user friendly it might be - is not their fault. (I feel compelled to say this as well in case by some random chance they actually find this blog post and feel offended. Blogger is owned by Google, after all, and people seem to find my posts on my other blog via Google Alerts fairly easily).

Usability testing is what it sounds like - testing the usability of something. It's like focus groups in the film industry, which are shown an early cut of a film so the filmmakers can garner some audience feedback before the film goes out to the general public. With web design usability testing, you are allowing a person or persons to test the site for the same reason - to get feedback. Beta testers for software and video games are essentially providing the same thing to software/game developers (I'm actually part of an open online beta myself at the moment, as indicated in the previous post - though I've had trouble trying to access the game I'm part of a beta for). I did a sort of usability test shortly before debuting my redesigned author website. I sent the link to some online author friends and some other online friends who know a thing or two about web design, in order to get feedback. This was useful, and I felt I got something out of it.

If I were a designer designing a site that fits usability standards, I would try to make it as clean and simple to understand as possible. While I dislike the "neutral fits all" idea preached by Sabrina Soto on her home staging show Get it Sold (it drives me nuts that she refuses to use any color besides neutrals when painting, even though her reasons may be good ones in the end, seeing as she's a pro designer and I'm not), I do like clean and simple. The simpler your page is, the faster it loads as well, which is another important usability consideration. In a sense, designing for usability is like living green - when living green you make changes that not only better the environment, but ultimately help everyone live a better life (not to mention it can potentially offset global warming, maybe giving this planet a chance to survive till we have some backup plan in place in case the Earth becomes too hot for humans to handle). Even little changes in usability could help a lot, I think.

Lastly, here are a couple good sites on this subject:

-Usability First - Web Design - This site provides some good information on making your website usable. Kinda targeted more to businesses though.

-Usability Guidelines - This is from usability.gov, a website maintained by the U.S. Department of Health and Human Services that is dedicated to the subject of usability - their tagline is "your guide to providing usable and useful Web sites." They provide some good resources both on this page and elsewhere on the site.

Hope you enjoyed this post. Au revoir!

Tuesday, October 11, 2011

Pokémon Trading Card Game Online is Cool! (Blog Post #1 Again)

Find a site that you think is cool or cutting edge and well designed. Explain what this site is about and why you find it compelling. What makes the site cool or cutting edge and how does it differ from most sites that are out there? Are there special, unique, or interesting features to the site? Can you determine how the site was made and/or the tools and techniques that were used?

My custom avatar for the TCG Online site



Recently, I discovered that the Pokémon Trading Card Game, which I used to play in its physical form several years ago, was being made into an online version, which you can find here: http://www.pokemontcg.com/. It is known as the Pokémon Trading Card Game Online, though the actual game on the site is referred to as Pokémon Trainer Challenge.


This site is basically what it sounds like - an online version of the original Trading Card Game. The original game involves collecting cards, making decks from them, and using the decks to play against others according to rules defined by Pokémon USA (or Wizards of the Coast, who released the cards until 2003). It essentially simulates a Pokémon battle in the Pokémon video games, with the same concept of a team of six Pokémon, damage, special conditions (like poison, confusion, etc), and prizes for defeating an opponent (in the form of prize cards; in the video game you earn either EXP - if you defeat a wild Pokémon - or EXP and money if you defeat another Pokémon trainer), coupled with aspects specific to the card game, like coin tossing, energy cards, and special non-Pokémon cards (initially called Trainer Cards, later expanded into the categories of Supporter Cards, Item Cards, Stadium Cards, and Pokémon Tools) that can affect gameplay in various ways (favorites early on were card-drawing cards like Bill and Professor Oak; other cards like Full Heal and the rare card Computer Search were also popular).

The online version, now available in open beta, seeks to replicate this experience online, with cards that look just like the physical ones. Based on the site's "learn the game" tutorials, the process of the game will go just the same as the physical Trading Game does. (I haven't tried the actual game; I've had some trouble getting in even though I should have access to the beta).

The site is cool because it is the only online version of a trading card game that I have ever heard of. If it is the first ever, then it is certainly cutting edge. It may help to generate more interest in the Trading Card Game, which I'm excited about because I haven't been able to play the game in a while (aside from a modified 30-card game at Comic-Con) and would like to get back into it again.

One of the interesting features of the site is the "Learn" tutorials. They feature an exclusive professor character who teaches you the basic, intermediate, and advanced aspects of the game through an interactive video environment. And if you finish the tutorials successfully, you gain special tokens as rewards (which don't have any value yet - a lot of aspects of the game aren't yet available because this is a beta - but which the site's FAQ indicates will mean something later).

Another interesting feature is the Deck Builder, which you gain once you purchase booster packs or theme decks using the credits you can gain from Pokémon Black and White physical booster packs and specially marked theme decks. After you open your purchased packs (as well as the free theme deck you get if you haven't bought a physical one and registered it - as I found out personally), you simply drag one card into place and the system creates a deck for you out of the cards you have. It's very useful because I've never been good at deck-building, which is why, I think, I've always lost playing the TCG in the past.

The site was obviously made mostly with Flash. The forum seems to be made with the typical PHPBB code used with forums. The site/game's still in beta though so it's hard to say exactly how things are built. A view of the home page source code shows some JavaScript and a LOT of DIV layers. The site also promises to be kid-friendly, a place "where kids can play the Pokémon Trading Card Game Online and we work tirelessly to help keep it as safe as possible," which may mean there is some PHP security code under the surface.

If I had been able to get into the game proper, I'd be able to say more, but unfortunately I can't. In lieu of that, please enjoy these screenshots that I took from the site:

Pokémon Trading Card Game Online community/forum

User dashboard

Home page

The initial game-playing interface

News page

User profile (with leaderboard)

Shop where you can buy booster packs for the game

Support Center

Tutorials section

On the forum, there are desktop wallpapers you can download with trainers on them, representing the different energy types in the TCG. This here is the water-type one (my favorite type)  featuring a trainer named Calvin.

The site's "ProfessorMaven" explains to users what exactly an "open beta" is.

To end this post, check out this video which shows what battling in this game is like:



See you next time!