assignment.008

Speaker: Karen, Information Architect/User Experience Designer

Last class period, we spent the time speaking with a UX Designer, Karen, whose portfolio includes the Barnes & Noble website and Second Life.

What I liked most about Karen's presentation was the definite clarity of what she was presenting. The visual she brought in, especially the Wireframe-to-Website visuals, really helped illustrate the actual process with current and real examples. For the most part, I knew exactly what Wireframes were after our own class discussion; however, her visuals added to how the Information Architect actually plays a role in the process and also how the finished product can change from wireframe to design.

She also made a comment on the importance of the difference between "Searching" and "Browsing" and how that plays a large role in how an Information Architect may design the site to optimize the user's capabilities for finding what they are actually looking for. Even more so, Karen explained the growing need for Search Engine Optimization (SEO) and how making a website's HTML contain coherent semantics in order for the site to show up on search engines.

I also really liked the work flow Karen developed. Work flow or work process is one thing in particular that I never knew and always wondered about to figure out how professional websites are developed and the steps involved. While her work flow is not definite or universal for all sites, it gave me a great general idea about those involved and what needs to be done.

Lastly, I liked getting her perspective about how she got to where she is. She is a successful Information Architect that is clearly sought out by large companies by contacts and networking. She gave encouraging insight to the possibilities, if you work hard, that could happen if you contact the right people and develop the appropriate skills.

---

My redesign blog for 21st Floor Associates, LLC may be found here

assignment.007

10 Most Common Misconceptions About User Experience Design

So, I didn't know a position existed that was basically the bridge or in-between position between a web designer and a web programmer. This web architect is the User Experience Designer (aka UX) is "more than just skin deep" and isn't just pixel-pushing and button placing artistic designers. UX designers are a large part of the entire process of building a website and basically has their hands in all aspects of the process. Not only is the UX designer the bridge between usability and design, but they also have to serve as the bridge between user experience and business needs. It seems, from this article, that the UX designer is basically the looming Big Brother that connects the dots where everyone else working on the project is specialized and tunnel visioned to their own respective jobs.

The Five Competencies of User Experience Design

What I like about this site is that it breaks down the functions of the UX designer into 5 categories: Information Architecture, that deals with designing a structure that accommodates both the user experience and business strategy; Interaction Design which deals with page elements, presentation, and page flow; Usability Engineering which deals with usability testing; Visual Design which deals with branding and communicating a brand through the visual elements; and Prototype Engineering which deals with increasing process efficiency.

To add fuel to fire, basically this reiterates in a more detailed breakdown, what the first article says: that UX Designers are essentially supposed to be somewhat experienced in all aspects of building a website and with that, are supposed to pull everything together.

Integrating Prototyping Into Your Design Process

This article connects the idea of website prototyping with UX Designers as a useful tool. While the first two websites have strong opinions of the need of UX Designers, this website adds to it and says that prototyping is almost essential to UX Designers in both the Design and Usability processes. Conclusion? Prototyping is essential to UX Designers, and UX Designers are essential to building websites...

assignment.006

Webpages to Redesign

Tutcast.com

Tutcast.com is a website compiling online video tutorials for Adobe Photoshop techinques. I want to redesign this website because first, while being a design/techie website in itself, the website has absolutely no design whatsoever. There is no personality, color, or anything to make it recognizable as "Tutcast." Even the logo is the smallest graphic on the page.

Secondly, the unncessary advertisement takes up the whole page and forces all the real content below the fold. I would want to utilize the space as much as possible and significantly cut down the advertising.

Lastly, Tutcast.com's creator, Howard, recently tweeted about wanting to redesign the page. Even he recognizes it's ugly.



21st Floor Associates, LLC

I picked the company, 21st Floor Associates, because this startup went out of their way for help on their business plan. My Entrepreneurship course was given this as a real-life project to come up with a total business plan for this real life company. 21st Floor Associates creates "how-to" videos about starting a new venture within a new startup or within a new company. Along with a whole new business plan, they are open to a real redesign of their current website.

Secondly, their website (and frankly, their logo) needs updating. Part of the creative process of rebuilding their business plan would be to fix their company image to appeal to people more than their current sterile and boring image. Their company is supposed to be about innovation and their image definitely does not speak that.

assignment.005

Wireframes...round two.

Let me take this approach as if I were at my design internship that I happen to land even though I have little design background, and especially no formal training in (true story, this happened to me twice). I recall myself being in over my head as each day as the art director or VP would throw terminology and/or techniques that I had never ever heard of before. Me, in my utter embarrassment not knowing basic terminology would nod my in a very convincing way. While I could Wikipedia whatever topic I want under the sun, it will never fully comprehend what I am really supposed to know. More importantly, it will never really teach me what is actually done in the "real world." Research is funny in that way. Let me ignore the question as it's being asked and allow me to handle it like I normally would. I'm going to nod, smile, panic for a second, and ask someone who actually does this...and gets paid.

I used to intern for Bravo TV's Print and Digital creative design department. Among the bullpen of designers were a couple web designers that I didn't directly work for; however, would lend an occasional helping hand in my utter confusion. One of the designers, Craig, was willing to divulge his innermost secrets (okay, maybe not so secret) of how he goes about designing for clients.

Craig first figures out exactly what the client wants on the website and develops a site map which usually just consists of a bulleted list in Word. Typically, from there and after an approved proposal, he begins designing layout comps - usually static jpegs. "So, you just skip the wireframe step of the process?" I ask inquisitively....He stops for a second, admits that it's based on the client. Some prefer wireframes to site maps, and some don't care so site maps are just easier. If requested, wireframes come after site maps. Many clients Craig works with, he just mentions that the first round designs (generally 3 pages/layouts) serve as the wireframes which he believes saves time and money; however, "if working with a new client - or a pain in the ass - then wireframes are better for locking in approvals."

...Okay? So aside from Craig's lethargic approach to wireframes, I ask how he usually does them. Craig just produces them in Illustator...and thinks that websites with online wireframing applications like HotGloo are made for people who don't know Adobe. So this is the information I pulled from a Bravo TV web designer...then again, I despise Bravotv.com...

So I asked an old friend of mine from the UK, Utku, that works at Mint Digital, a company that works with software developers, interaction designers, and concept developers. AWESOME. Someone who ISN'T coming from a design point of view. I caught Utku in his insomnia at about 4:00 am his time to ask him his own processes for concept design for web pages. Much to my surprise, he and his extremely professional team partake in a more intensive process involving all of the above - Utku loves him some paper prototyping. Despite realizing how many people don't prefer that method of concept designing, he's a fan of it despite it being rough and believes it's best for "fleshing out interactions." The developers Utku works with mostly go through the motions of site mapping, paper prototyping, wireframing (in Adobe), and designing flat comps.

Lastly, I asked my distant friend, Affan, that freelance designs for clients. Affan is still in school, so I guess I would classify him as a tech-y younger generation of web developer. Affan goes with content consultations to figure out the best way to build the site that the client wants because usually "people can be pretty vague when they want you to do a job." Afer that, Affan estimates a timeline for the job and works out the simple sketches and drafts behind closed doors. He only shows clients static, flat mockups that are polished because clients "may know what they want but they rarely have any vision so you need to make the rough stuff look good." When I brought up wireframes, Affan only replied that he never used them and asked "how old school is your professor?"...derr...But with little convincing with this website, which I found to be extremely helpful in explaining why and showing how these concept designing steps work, Affan easily gave in and figured that wireframes are probably useful...and that he might actually look into doing them on Photoshop; however, if he finds them a useless waste, then "eff it."

So what did I learn after asking a creative designer, a web developer, and a freelance web designer? Well, first of all everybody kind of functions on their own terms and there is not really one "right" way to do something. Secondly, the more in depth to the job entails, (developing more intense then JUST designing) the more valuable paperprototyping & wireframing will be to make sure both developer and client are on the same page. Third, wireframing can simply be a part of static comp layouts, but a version that can be faster to produce and easier to change.

That being said, where do I fit in in this process? Am I a Craig, Utku, or Affan? I think, and I'm almost positive that if I will enter the world of web design at all, I will be Craig. Not because I'm lazy and don't want to go through paper prototyping and concept testing, but because web design, if anything at all, is what I'm interested in. I still need to wireframe. Where will this go in 5 years? If Affan proves to be a new generation of web developer, then maybe these intermediate steps are irrelevant; however, I don't think that's the case considering companies like Mint Digital are forward and innovative and seem to require these types of steps. Maybe "paper" prototyping will get easier digitally? Maybe more user friendly applications like wireframe builders online will pop up and enable average-joes to bring wireframes to designers/developers with ideas of their own.

While I used Photoshop in my previous post to develop the frames, I'll see how user-friendly and if at all easier it is to use these online wireframing applications.

HotGloo
This application is actually a lot easier to handle than I thought any of these programs would be. It's actually really attractive and somewhat intuitive in ways that Photoshop is (with control/apple commands, etc). I would need a whole lot more time to explore all that HotGloo can offer to see if it actually is worth using instead of an Adobe Program with virutally no user limitations.













Gliffy
I googled Wireframe applications and came across this one - which is horrible. I could only make shapes...and then it would give me error messages. I guess if you want to make flow charts and floorplans it could work?













Maybe it's my laziness, but wrestling for hours with these programs is exhausting me. Adobe Illustrator and Photoshop give me all the flexibility I need...why mess with that? If there is one consistency with any opinion I've asked it's that when used, wireframes are developed in Adobe programs. I see the value of these applications for people who don't know how to use Adobe, but I don't ever forsee myself depending on it.

Short version conconclusion? Yay to Wireframes, nay to wireframe applications.

assignment.004

Website Wireframes

Website wireframes, like paper prototyping, is a method used by web designers to visually plan out a design of an interface before actually building a website. Wireframes focus on the structure of the website prior to the design of the website. It illustrates the structure of the site and its relationship to its pages while maintaining consistency throughout the inner pages of the site.

Below is a screen cap of Tutcast.com, a website that makes Adobe Photoshop Tutorials.
Prior to coding and design, a wireframe image would look like this.
The wireframe serves as a stable, simple outline of the structure of the website that functions as a base for developers and designers to reference while building a site. In this website, much of the website that fits "above the line" is taken up by web advertisements and very little of the page is reserved for actual Tutcast content. A redesign could involve cutting out most of space reserved for advertisement and structuring a website focusing more on the video content produced.

Wireframes can be produced both digitally (as shown above, created in Adobe Photoshop) or drawn on paper (an example, being paper protoyping as shown in a video in a previous post). One advantage of paper prototyping over computer generated wireframes may be the ability to illustrate and view many "pages" of a website design at once while being able to physically move around, eliminate, or change pages faster than on a computer graphic program. Below, again, shows a website with a wireframe that does not allow users to interact with the prototype.

















A redesign of this website for 21st Floor Associates would need a more interactive wireframe where people can interact with the links at the top of the page and see where each click leads to. The advantage of doing a paper prototype would encourage this interaction.

This wireframe requires a more interactive prototype for more clarity of direction than the simple wireframe can offer. Paper prototyping may offer a way of designing for functionality rather than just for design structure. The limitations of wireframes, however, are becoming less of a problem while technology allows for more user interaction. Programs like Adobe Photoshop, InDesign or other programs available specifically for wireframes are available to modernize the creation of pre-building phases of website design.

Another tool designers use for the web designing process is the use of a Site Map. While site maps act as a sort of table-of-contents for web pages, it is also used as a planning tool that lists the pages of a website in a format that are organized in a hierarchical fashion. It is used to make sure every page within a website is found by both users and search engines, especially when the website involves flash or javascript.

The next step in a web design prototype could be a comprehensive layout - a mock up of exactly what the website would look like including the design. The comprehensive layout, or "comp" applies to any sort of design projects including magazines, books, or advertisements. It would be in the phase where companies could show clients what a project would actually look like visually instead of just functionally.

Graphical User Interfaces (GUI) are allowing people to interact with a computer in more ways than just typing and clicking such as modern touch cell phones or ATM machines. These programs depend on user-centered designs. It is important for these designs to be tailored to the desired functions that the program requires. Users interact with widgets and a model-view-controller allows for a flexible structure so the GUI can be customized by the user.

Related to graphical user interfaces are interfaces for website management that simplify the process in websites that frequently update or change content such as news websites or online shopping sites. Interfaces for website management allow people, other than programmers or developers, to access and manage the website without having to know any code. It works similarly to the user-friendly ways that Blogging websites such as blogger.com work where users can sign into their account and update posts without having to code the site.

All of these tools are useless without the feedback from any typical user. Wireframes, paper prototypes, site maps, and any other tool used for web design planning are made so regular people, particularly a focus group comprised of the people in the target market of the website, can test the comprehensiveness and agreeableness of the website design. These people ultimately decide if a design is useable or not.

assignment.003

Semantics & the Web

Semantics of the web involves a set of language principles that enables people to program the web to do what they want it to do. It is the idea that information can be translated so that computers may be able to do tedious tasks that humans can program it to do on the web.

Semantics separates presentation from content to make more funtional and attractive websites. This includes the standards and tools of XML (Extensible Markup Language) , XML Schema, RDF (Resource Description Framework) , RDF Schema, CSS, and OWL (Web Ontology Language) that are organized in the Semantic Web Stack and the way data is organized. Semantics are needed for web coding like HTML to work.

Semantics of the web are important to modern web development's flexibility. Aside from its browser and device flexibilities, it also is capable and conscious of handicap access and is ability to adapt. It is important to the programming of websites with broad ranged audiences like Facebook or the development of new programming for new devices like the iPhone.

Some challenges that semantics are met with are the inconsistency of logical contradictions, vagueness of terminology, uncertainty of precise concepts, and deceit misleading consumers. In a New York Times article, writer Patricia Olsen describes a company that uses a "buddy system," or a type of partnering system, that enables programmers to collaborate and become more productive and accurate with their work. This system is preventative for any of the challenges that semantics may bring if only one programmer is writing. It also helps to progress and develop what may be the future in web semantics. On Wikipedia, Tim Berners-Lee predicts, "the day-to-day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to machines."

Dreamweaver

My experience with Dreamweaver was more difficult than I had imagined. I hadn't used the program since my high school web class; however, I thought I would pick it up faster. The things that I had difficulty with was starting and sync-ing CSS sheets with the HTML and linking extra HTML websites to the main index page. After completing the assignment, I found that style sheets can be confusing if styles are applied to more things than I intended for them to (for instance, the whole page instead of a single line of text.

Dreamweaver, I have discovered is an easy program to play with and learn just by experience. I need more help figuring out how to link to internal pages and I would also like to know how to position things more precisely along the page.

assignment.002

Paper prototyping is a method popularized in the 1990's used to help design and test the user interfaces of a website. The method involves creating rough hand-drawings or paper models of the design and is used to provide a good source of early-round comments and feedback on the usability of the design. It, quite literally, is taking a webpage to the "drawing board."

Prototypes are created by drawing or printing individual elements on paper that are cut out and placed on another piece of paper that is drawn to be the computer screen. With enough creativity, prototypes can model many website functions such as drop down menus, multiple pages, or scrolling.

Usability testing involves a human test user to "click" around the prototype and a human facilitator acts as the computer to simulate what the webpage would do with each move. The facilitator's role is to be extremely knowledgeable about the user interfaces of the website. Some issues that usability testing can catch are confusing concepts, poor terminology, layout problems, missing functional requirements, design preferences, priorities, or issues relating to the company beyond the user interface.

Benefits of paper prototyping include a low-cost version early in the design that allows for easy and more critical modification. It also encourages everyone involved in creating the website to be hands on in the creative process.

Problems with paper prototyping include no actual tangible progress in the coding and creating of a webpage. It is an extra step in the process to emphasize feedback and creativity. It also can occasionally misrepresent the look and design of the page if the prototype is too rough.

Jakob Nielsen's article comments on the reality of paper prototyping: designers rarely use paper prototyping and managers feel as though it's and expensive and time-consuming option. People assume there is no value in doing something so simple. In Nielsen's experience, he believes there are significant useability problems that can be caught early on in the design process by creating paper prototypes. He believes that the eaProxy-Connection: keep-alive
Cache-Control: max-age=0

ier the changes, the more significant the benefits will be as far as ability to make significant changes and also cost to make these changes.

I found the Wikipedia article on Paper Prototyping fairly thorough in explaining what paper prototypes are and their purpose in web and software design. It pulls a lot of information off of Carolyn Snyder's website and book about paper prototyping which also digs deeper into the benefits of using paper prototypes.

I found a few videos on Youtube demonstrating paper prototypes in their testing stages. Some were more advanced than others; however, the video below is a good rough example of how paper prototypes can function.

----

My prior experience with HTML consists of minimal interaction with the Dreamweaver applications and HTML manipulation when changing graphics and content on a webpage that has already been coded. I have a good working knowledge of basic HTML tags and how to implement them.

Dan's Web Tips break down HTML tags into to basic types: logical tags which represent the structure and meaning of a document, and physical tags that represent specific visual effects which are intended to be reproduced in a precise manner.

The use of only logical markup was what the original implementation of HTML consisted of. Logical "constructs whenever they fit the meaning you're trying to convey." Tags like <*b> <*header> or <*h1> to block of header content and <*strong> tags to signify boldface text belong in this group of HTML.

Physical markup includes tags that achieve particular visual effects that don't fit into the structural meaning of logical tags. It can be looked at as the type of tag to complete more specific visual tasks. Instead of using a logical <*strong> tag to bold text, a physical tag would appear as <*b>. Physical tags can also greater define text size, color, and type.

The Glossary of WWW/HTML terms lists common HTML markup that can be used in web coding. It outlines terminology commonly used as well as certain tags and their uses.

Questions that always hinder me from advancing at my own HTML skills usually revolve around the ordering and positioning of certain HTML tags. This usually is most critical when I try to attempt to understand HTML mixed in with other markup such as CSS and any other language that may follow different rules.