Sushi & Robots

Why all the hate for 2008?

Jina Bolton — Wed Dec 31 15:09:01 UTC 2008

On Twitter, there seems to be a whole lot of hate for 2008. I'm all for looking forward to a new year, but really, was 2008 that bad? While any year has it's ups and downs, 2008 was pretty good to me.

I changed jobs at Apple from being a Production Designer (focusing on Front End Web Development Engineering) to a Visual Interaction Designer.
I traveled to
- Vancouver and Whistler.
  This was my first time to Canada. I was the lucky winner to get to go to Web Directions North, with conference ticket, airfare, and flight all paid for. Besides a fantastic conference, I also hung out with great friends, had fun karaoke, and went snowboarding for my first time.
- Austin.
  For my second South by South West, I was on a panel called "Social Networking and Your Brand" with a very talented group of guys: Paul Boag, Steve Ganz, Steve Smith, and Mark Norman Francis. I also did a performance art piece for 20x2 called "What's the Difference?" in which I had Joshua Lane and Eris Stassi play Rock'em Sock'em Robots on stage while I recited a poem I wrote about evil robots vs. good robots. Also, I met one of my all-time favorites, Moby, at the Pure Volume party! Finally, I started a relationship with Joshua Lane after hanging out with him that week.
- Brighton and London.
  This was my first time to the UK. I started in Brighton, where Jeremy and Jessica were very kind and hospitable to me and let me stay with them. I went to the beach, hung out in the Clearleft office, and saw I Am Kloot play live. Then in London, I did a live on-stage photoshop battle with Hannah Donovan on my side; we were up against Jon Hicks and Elliot Jay Stocks. The unexpecting host, Andy Clarke, was surprised to see the whole contest turn on him, all in good fun. I also did a half-day workshop on Creating Sexy Stylesheets. After the conference, I hung out with Charlotte and Russell (two fellow Apple employees who work out of the UK office), went to the Tate Modern, met an amazing web designer I admire (Miguel Ripoll), and hung out on my last day there with Larissa Meek.
- Memphis.
  I visited for my brother's graduation. It's always nice to visit my old haunts.
- Portland..
  Josh and I took a weekend trip and crashed the Rails Conference after parties, and hung out with Dan Benjamin and Justin Palmer.
- Las Vegas.
  I went to Vegas for the first time ever, to celebrate Josh's birthday. I saw Cirque du Soleil's O, did some shopping, ate expensive but delicious food, and did a tiny bit of gambling.
- Los Angeles.
  I went to Los Angeles for the first time on a weekend trip to celebrate my own birthday. I took photos down the Hollywood Walk of Fame, saw two fantastic art shows where I met up with Jim Mahfood (a friend who did the illustrations for my website) and met Susie Ghahremani (one of my favorite artists). I also met up with Joe Segura (a former student at Memphis College of Art, where I got my Bachelor of Fine Arts — now doing film stuffs!), ate some fantastic food, went bike riding along the board walk from Santa Monica to Venice Beach, and did some shopping.
- Sydney.
  After Josh and I broke up, we went to Sydney for our first times to Australia (a trip that was planned well before the breakup). I had been dreaming of going to Australia since I was a little girl. I gave a talk on Creating Sexy Stylesheets, and saw as much of Sydney as I could. I did a helicopter ride, went whale-watching, went to Manly Beach, Bondi Beach, saw Kangaroo (and ate kangaroo), saw other native animals like koalas, wallabies, etc. (didn't eat those), and met some amazing people.
- Atlanta.
  I took a weekend trip to speak at Webmaster Jam Session, where I was on a Web Design Smackdown panel, and also did the Creating Sexy Stylesheets talk. I had an absolute blast hanging out with some really fun people.
I had some articles published:
I was interviewed:
- Jina Bolton on Creating Sexy Stylesheets, SitePoint
- UMS Interviews: Jina Bolton, Unmatched Style
- 112. jina, Boagworld podcast
- El diseño es el código, El País, a large Spanish newspaper, on the scale of New York Times.
I moved from Mountain View to San Francisco and got an awesome new loft apartment, and hosted two very fun parties: my housewarming/Josh's birthday party, and Thanksgiving (featuring Eris Stassi's amazing cooking).
I started taking graduate courses at the Academy of Art University, to get my Master of Fine Arts. I have a wrap-up post of the semester I just completed coming soon.

As you can see, 2008 was a pretty big year for me. Now there were some negative things (a break up, cancelling a book I was writing, and the rest which I won't go into — I like to focus on the positive), but they were all things to learn from. I am putting together a list of things I'd like to do in 2009 and beyond. These aren't really resolutions; it's more like a wishlist of things I want to do, which could easily (and most likely will) roll over to 2010. If you're interested, you can see this list at my new 43 things account. That list is still growing, and will probably continue to grow. I want to do everything. It's just the way I roll. :)

P.S. The rhyming in this entry's title was not intended.

Principles of Usability 8

Jina Bolton — Thu Oct 30 21:01:01 UTC 2008

Identifying Requirements: Difficult part of design process. Understanding domain area. Understand the users and stakeholders. Determine what your human interface and interaction will be. Techniques to SSNif out whatʼs needed and determine usage scenarios. Imagine the Future.

“The best way to predict the future is to invent it.”
—Alan Kay

Using stories as a design tool: Stories are scenarios. Scenarios are use cases. Use cases can be analyze using task analysis. Task analysis looks at how effectively and efficiently users reach their goals.

You can see that the story is complete when you can observe the different story components lead to a conclusion. Try to incorporate this level of definition and detail in the usage scenarios you create for your designs.

Anatomy of a Scenario: User – This is the central POV from which the user experience unfolds. Stakeholders -- A person, group, organization, or system that affects or can be affected by the existence of the user experience. Goal – The planned intent to achieve or bring about a specific result. It is the anticipated result, which guides the actions of the user. Context – The environment or surroundings where the userʼs actions take place. Outcome – The userʼs ability to perform actions after the experience. User Scenarios&hellp;

SSNifs & Requirements: Philip Haine, User Experience Interaction Designer: Situation, Stakeholder, Need, Feature (SSNifs). Stakeholder - User or customer, in some situation. Situation - Context, setting or environment. Need - A condition or situation in which something is required or wanted. “SSNifing”

“SSNiF out the domain to make sense of it”
—Philip Haine

Big SSNifs: Why the product is needed. Little SNNifs: Working out the details. Design Pyramid: Understanding: Research and analysis about customers and their needs. Vision: Sift through the all the Big SSNiFs and sculpt a product vision. Requirements: Play out the Big SSNiFs into lots of little SSNiFs → requirements. Design: Create a solution with the scenarios by walking through the SSNiF scenarios & testing the design.

Use Cases: Originally developed by Ivar Jacobsen to help software developers analyze the way users typically interact with a system. Actors: Any one or thing that interacts with your system. Users, databases, companies, other systems, etc. Use case diagram: Shows how the tasks and actors relate to each other. Use case scenario: Details steps and actors involved for a specific task. Additional use case(s) needed (e.g., extensions). Details steps and actors involved for a specific task.

Task Analysis:: Procedural analysis: Procedures = Steps in a particular task. Job analysis: Job = All tasks part of overall goal or job. Workflow analysis: Workflow = Flow of information and control needed to complete a process. May include multiple people and tasks. Error analysis: Errors = Mistakes that can occur in any of above.

Levels of task analysis for web application. Big picture: Who are the user groups that will use the web application? How (if at all) will they interact with other users? What are they trying to do? Individual page view: What display/view/pages will the user use to accomplish their goal? Procedures in page view: What steps will the user go through on each page view?

Making improvements to tasks:: Consistency: If appropriate, make similar tasks work and look the same. Brevity & clarity: Try to make your tasks shorter if you can do so without sacrificing important functionality. Combined functionality: Reduce redundancy. Are there ways to group tasks? Are there tasks the user does more than once that can be remembered?

Homework & Reading: In your group: Update your Requirements Analysis Reports to include SNNifs. Create a Use Case/Task Analysis report that describes how your application will work. Feature/Functionality specification. Create use cases for all main tasks. Perform task analysis on use case steps. Due start of class, next week. Read chapter 5 in textbook.

Sleepy kitty making biscuits

Jina Bolton — Sun Oct 26 14:14:01 UTC 2008

This video is so ridiculously and extremely cute. Seriously. You have to watch this. It will put a smile on your face.

Robots don't know anything about Twitter.

Jina Bolton — Fri Oct 24 18:22:01 UTC 2008

Cool comic by Doc Pop, created for the 24-hour Comics Book Day. It's cute, and has 2 of my favorite things (robots, and Twitter)! [Via Laughing Squid]

Web Technology 2: Module 7 (again)

Jina Bolton — Thu Oct 23 22:43:01 UTC 2008

Last week was a working session, so Module 7 is moved back to today. Working with PHP and the database. [Side note: Teacher is suggesting we all sign up for Twitter. Uh... done? ;)]

Review of Database Column Types, Using Functions (previous class information). Introduction: Connecting to the Database with PHP. PHP: $dbc = mysqli_connect (hostname, username, password, databasename);. $dbc is short for database connection. If successfully connected this variable will be the reference for all subsequent database interactions within your scripts. PHP: mysqli_connect_error() returns the connection error message. mysqli stands for improved mysql interface, which needs at least versions PHP 6 and MySQL 5 to run. Just need that once. Error checking: Different kind of errors: PHP errors, MySQL errors, SQL errors. Within PHP, there are three different kinds of errors: syntactical (typos stop the script from executing), run time (common if the wrong parameters are sent to a function, your script will still run, page will load, but weird things might happen after submit like a funky error), logical (actual bugs, syntax was coded right, spelled right, but the logic doesn't quite work right). SQL error types are easiest to deal with: errors report immediately: syntactical, if doing dynamic queries and there is an error, check your PHP. Unable to connect to db is a common error.

Debugging tips: take a break, come back — sometimes staring at it too long just frustrates you. Coming back after a break can help. Check that you're editing the right page. Check that your latest changes have been uploaded to the server. Check your versions of PHP and MySQL. Older versions might not perform certain functions. You can run a PHP info script to find out what you have. Try a different browser. It can be good to create a general debugging script to include in all your scripts.

Debugging HTML: check the source code, use an HTML validator, add borders to layout pieces, such as divs, test the page in another browser, develop in firefox first, and then test with other browsers, Firefox add ons: Web Developer, DOM inspector, Firebug, HTML validator.

Displaying PHP errors: if your web server doesn't show PHP errors for some reason in the config, you can create a debug script. ini_set('display_errors', 0); — It will show you your syntactical errors. Keep in mind that this only works if your script will run (up to this command), meaning if the very first line of your script breaks stuff, this won't work.

Homework: start your JS file for your site. All form pages in your site must have client-side error checking, using the external JS file. Check that all required fields are filled out, has the user entered text in a numeric field? has the user entered a valid email address?

Principles of Usability: Module 7

Jina Bolton — Wed Oct 22 23:20:01 UTC 2008

The rest of the semester will be focused on the BIG project (a web application designed as a group). Web application is different than a website. It delivers functionality to a user over an the web. It is interaction-based, more than just information-based.

User Centered Design (UCD) Process: Early focus on users and tasks, Well-defined process, Iterative design, Usefulness (user goals), Ease of use, Learnability, Overall satisfaction. User Experience (UX): Overall experience and level of satisfaction with a given product, system or environment. Human - machine (e.g., calculator). Human - computer (e.g., desktop application, PDA). Human - environment (e.g., real, virtual).

Project: design a class website for teachers/students. Steps: Requirements, conceptual design, mockups & prototypes, production, launch. Within each of these steps, we will be doing evaluation.

Today's class will focus on requirements analysis. (Phase 1) Purpose/problem: formulate design problem; research & define potential users: user interviews, surveys, research, observation; determine context of use & platform; evaluate existing and competing designs: competitive analysis, heuristic analysis; detail project goals and parameters. EVALUATION.

Phase 2: conceptual design: work out functionality (what the product does), use cases, task analyses, information architecture. EVALUATION.

Phase 3: Mockups and Prototypes: Visual representations (mockups), Interactive representations (prototypes), Produced rapidly, evaluated, refined, evaluated again, etc., Paper prototyping, wire frames, User testing, focus groups, heuristic analysis. EVALUATION.

Phase 4: Production: Final visual design established, Data entry, image creation & software coding, Final product created, Quality assurance (QA), user testing, field testing (does it work the way it’s designed to?). EVALUATION.

Phase 5: Launch: Final testing, Product made live, Verify site correctness. EVALUATION.

Good Design: example: iPod & iTunes. Design Pyramid: Understanding → Vision → Requirements → Design.

“The design we can see and touch is just the tip of the iceberg. It is supported by distinct layers of information and prerequisite decisions.”
— Philip Haine

So Phase 1, Requirements analysis: Understand the problem to solve. Research target audience. Define context of use. Define target platforms. User needs analysis. Perform competitive analysis. Summarize application objectives, features & functions.

Define Target Audience & Purpose (WHY): First step in any design process. Figure out who you want to reach, and WHY. Define them as precisely as possible. Age, gender, nationality, income level, education, occupation, computer experience, etc. [In class, groups coming up with the description...]

Research Target Audience: Learn as much as you can about your audience. Census Bureau. Industry analyses. Survey results. Focus groups. Interviews. Context of Use: Where and when will this application be used? Accessed from home computer in the evenings? Accessed from iPhone on BART during commuter rush hour? Define Target Platforms: Which browsers will our users use? Mozilla/Firefox, Internet Explorer, Safari, cellphone browsers, text-only browsers, others? Which versions of these browsers will they use? What operating systems will they use? What percent of users are likely to use which browsers/versions/platforms? [In class, groups coming up with description...]

Understanding Browser Differences: People use different browsers and platforms. People may have older versions of browsers. Screen resolution. Browsers can have custom settings. Fonts (face, size), Link colors, Image loading, Plug-ins, Scripting, Pop-ups, Others. Browsers deal with web standards differently. CSS1, CSS2, XML, HTML, XHTML, JavaScript, PNG, etc. Comparisons (Safari vs Mozilla vs IE) Check out: http://weblogs.mozillazine.org/hyatt/ and http://www.icab.de/test.html.

What are web standards? The set of standards outlined by the W3C recommendations at: www.w3.org. These include (but are not limited to) specifications about: HTML, XHTML, CSS, PNG, Accessibility standards, XML, XSL and XSLT. Why do I care about standards? Speed of development: Validating code, One target for coding. Simplify maintenance: Separation of content and design (CSS), Logical markup. More access, Access by the disabled, Alternative browsers and platforms. Smaller sites (file sizes), Reduced bandwidth costs, Smaller, reusable code. Take advantage of browser cache. Improved user experience

Web Standards: The Web Standards Project, The World Wide Web Consortium.

User Personas: Build personas for 3 to 5 representative users from your target audience, More diverse audiences need more personas, Conduct interviews and/or surveys using real people whenever possible, Get their permission, Protect their privacy when appropriate, Have them review the data. Photo of user (Should be in the same environment they will use the application (or product). (Photo of Joe the Plumber). User profile data - demographics: Age, Gender, Occupation, Education, Income, Work Hours, Disabilities, Computer, Browser, Browser settings, Network, Technical Skill. User scenario: Typical schedule for your Persona. Sketch or photo of user on location (using a website). See example in Chapter 2

Example schedule: What are their work hours? How do they get to work? When do they use the site? When do they use other sites? What do they do with this web application? Why is it important? How do interactions with others influence their use of the site? What are the relevant exceptions to these events? Context of Use: In what environment they will use the application or product? Are they alone? With others? Does it look noisy? Quiet? How is the lighting? Is the user doing other things? Stakeholders: Who are the stakeholders? Anyone whose affected by the existence of the product or application. End-user, business, partners. What are the business goals? Investment for the long run vs. quick ad-hoc patch. Use this information to generate your project and application/product requirements.

Summarize Application Objectives & Goals: Questions your objectives need to answer: Why are we creating this application? Who is it for & what do they need to do on the application? What are the initial functional features of the application (broad view of what the user will be able to do)? What are the usability objectives of the application?

Competitive Analysis: Find some competing sites that are similar in: Target audience, Platforms, Scope of features, Price, Unique Selling Point. Analyze for strengths & weaknesses: Analyze sites for usability and interface ideas. What categories, labels, features & processes do they use? Steal the good ideas, avoid the mistakes. Copyright law protects Look and feel, Exact wording, Images.

Final project: In class tasks: Choose a group leader, Decide on when to meet outside of class, Further define your target audience, purpose and target platform, Begin competitive analysis. Homework As a group: Conduct a Requirements Analysis and create a report for your group project (BIG project). Define the problem to solve. Research target audience. Define context of use & target platforms. Summarize project & product/application objectives. Perform Competitive Analysis. Due start of class, next week. Reading Assignment: Reading: Read chapter 4 in textbook. SSNiF Analysis Part 1: Introduction, SSNiF Analysis Part 2: How it fits into the product creation process, SSNiF Analysis Part 3: Tips for SSNiFs

I made a blue me.

Jina Bolton — Sun Oct 19 23:43:01 UTC 2008

I randomly started doing this image of myself, based from a Photo Booth photo I snapped right before doing the illustration. The lighting in the photo caused me to look blue, so it inspired me to abstract it further. I'm a little rusty, I don't take enough enough time out of my life, lately, to put towards creating non-work-related stuff. However, I still think for something done really quickly, this came out pretty well. I don't know why I like it so much, but I do!

Fifty People One Question

Jina Bolton — Fri Oct 17 16:56:01 UTC 2008

I love simple sites that inspire me. Check out the newest of these sites that are on my radar: Fifty People One Question is a really cool project brought to you by Crush & Lovely and deltree. The idea is to go to a place, ask fifty people the same question, and film the results. The first up is New Orleans. Watch the video. Think about your own answer, and leave feedback on that site.

Web Technology 2: Module 7

Jina Bolton — Thu Oct 16 21:21:01 UTC 2008

Today's class is just a lab session, so no notes for the day. :)

Principles of Usability: Module 6

Jina Bolton — Wed Oct 15 21:23:01 UTC 2008

Most of class is an exercise, not many notes. Field trip: Intuit Usability Lab, Mountain View, CA, Friday, November 14, 2008, 12:30—4:00pm (reschedule November 5 class), transportation provided. Homework: Refined Phone Design. Refine the design of the cell phone based Address Book application. Your report should include: Description of usability test (brief). Target audience description. Facilitator’s instructions to the user (e.g., speak out loud, not testing YOU, testing the design, make fell. comfortable, can stop at any time), Task descriptions, Flow diagram for each showing how the different tasks are accomplished, Screen layout design (can be combined with flow diagram like the example I showed you in class) Summary of your testing answering the question “What did you change or learn as a result of usability testing?” Summary of any pre or post questionnaire you obtained in your testing (place the actual response sheets in an appendix at the end of the report). Word processor for writing the report. Graphics program to generate the screen designs and flow diagrams. Print document of your test report. Name of every member on your team. Number each page of the report. Place a soft copy on the class server. Hand in a hard copy of the report to your instructor. Due at our next class meeting, which is one week after in-class testing. Reading chapters 2&3.

Web Technology 2: Module 6

Jina Bolton — Thu Oct 09 23:45:01 UTC 2008

Today's class is about more MySQL stuff. Apparently next week is midterms. I'm panicking a little. Anyway, here's the class stuff.

Common functions: SHA1() function: encrypts data, creates a string that is always 40 characters (col length must match), one way encryption, available as of MySQL 5.0.2. NOW(): sets the field to the current time (on server). No spaces between functions. Now() not NOW (). Quotes in queries: In every SQL statement, numeric value should not be quoted. String values must always be quoted. Date and time values must always be quoted. Do not quote functions. Do not quote the term NULL.

Inserting records: Inserting records adds information to the database. There are always 2 ways to write an insert record statement. SQL: INSERT INTO tablename (col1, col2, etc.) VALUES (value1, value2, etc.). SQL: INSERT INTO tablename VALUES (value1, value2, NULL, value3, etc.). If you do not define the columns separately, you must insert a value into every column, even NULL. The first format is usually preferable as it is less error prone . MySQL allows you to insert multiple rows, but it is not a SQL standard.

Selecting data. SQL: SELECT * columns FROM table. The asterisk means select every column in the table. Otherwise, specify columns to be returned. SQL: SELECT column1, column3 FROM table. Increase performance, you choose the order to view data, allows you to manipulate data in the columns with a function. You can retrieve the same column multiple times.

Using Conditionals. SQL: SELECT columns FROM table WHERE conditions(s). Common MySQL operators for where conditions: IS NOT NULL, IS NULL, BETWEEN, NOT BETWEEN, IN, OR (||), AND (&&), NOT (!), =, <, >, <=, >=, !=. Multiple operators can be used together to create complex conditions.

Using LIKE a characters nd NOT LIKE. Searching for an exact string is easier than searching for a string that is similar. Use wild-card: the underscore matches a single character. The Percentage sign matches zero or more characters.

Database design, also known as database structure, data modeling, or database schema. Normalization eliminates redundancies (making sure there aren't duplicates) in your database and ensures data integrity. Understanding how data is going to be accessed dictates the modeling. Think of questions you might need to know about the data in your site and how you would answer that information, i.e. how many users registered last week. Primary keys and Foreign Keys are integral to creating a normalized database. Foreign keys are the representation in Table B of the Primary Key in Table A. Data in the table might lend itself to a natural primary key, but if not then create an ID. Best Practice: Primary key as the table name plus ID. Example: users_id. Best Practice: Primary key should be an integer for better performance.

Database relationships are how the data in one table relates to the data in another table. There are 3 types of relationships: one-to-one one-to-many, many-to-many. Best Practice: avoid many-to-many relationships, to avoid data redundancy. Use intermediary tables to break down relationships.

Due next week for Midterm:

Project description
Site map
Page site list (indicating templated sections)
User task flows
Comps
CSS file
HTML pages
Database design document

Format:

Send a link to the instructor. Should be a functional and well designed static site.
Create a PDF with project description, sitemap, user task flows, and comps.

Principles of Usability: Module 5

Jina Bolton — Wed Oct 08 21:39:01 UTC 2008

Tons of catching up to do. It's going to be a busy weekend. Yay, starting class with a quiz. Today's class: paper prototypes.

What is paper prototyping? A method of brainstorming, designing, and testing user interfaces. Many quick iterations are developed, tested and refined. The design team tests the prototype on users by “playing” computer. Storyboard vs. Prototype: What’s the difference? Storyboard are user view mockups. Prototypes are user view mockups with data.

Example prototype: a post it note to design a cellphone's stop watch, and all it's functions and status. This is interaction design (figuring out what the sequence of actions are, what's the response, is it easy to understand and useful?

Paper prototyping testing roles: User (external non-team member): Asked to attempt tasks by “clicking” (touching) the prototype. Computer: Changes the prototype to reflect user’s choices. Stays neutral. Facilitator: Directs the user by asking them to perform tasks, making them feel comfortable, and guiding the session. Observer(s): Take notes on the session.

Scenario & Tasks: Scenario is a story set in real life (“You’re at a party and meet Mary for the first time. You wish to meet up with her to attend the new art exhibit at SFMOMA). A task is an actionable goal that involves steps the user takes to accomplish (e.g., Put Mary in your phonebook).

Facilitator’s script: Greeting & intro to usability study. “Not testing you”. If something is wrong it's not the testee's fault, it's the designer's fault. “Can stop at any time”. You don't want them to feel forced. “Speak aloud what you’re thinking”. This is info you need to know for your design.

A pre-test for demographic info and a post test for impressions and suggestions help give you additional data needed for your research. What would they change? It's like another study in of itself.

Homework assignment: Do a paper prototype for a cellphone interface for an address book. Group project. Be at school on Saturday at 7:30pm in the library.

Web Directions South and Webmaster Jam Session

Jina Bolton — Mon Oct 06 21:24:01 UTC 2008

This month has been a crazy month for me! I went to Sydney, Australia, for Web Directions South, and then the following weekend, I red-eyed it to Atlanta for Webmaster Jam Session. It’s fun, but I’m glad it’s over. Here are a couple highlights:

Web Directions South, Sydney

Sydney is one of the most beautiful cities I have ever seen. And there's a lot to do. I went whale-watching, I did a helicopter ride over the city, I went to a couple beaches, and even ate kangaroo. I had a blast and would gladly do it again if asked. However, I must admit, Sydney is also a tough crowd. According to feedback on Twitter, people just aren't into "pie-in-the-sky" CSS 3 future talk. Too bad. :(

Webmaster Jam Session, Atlanta

Can we just say this was the craziest thing I've ever done? So after work, I quickly packed a suitcase, and jumped on a plane to Atlanta over night. I arrived at 6:40 AM (read: 3:40 AM PST, where I live), checked into my hotel, showered, got dressed, and went to Day 2 of a conference, and did a live on-stage critique (as part of a massive panel) of websites submitted by conference attendees.

After the panel, I attempted a nap, but was unsuccessful, so I played some rock band instead, until it was about time for my presentation (which was last). I gave the same talk I gave the week before in Sydney, but found that the Atlanta crowd was much more receptive and excited about "future talk". I was happy about that, and am excited that some of the attendees seemed inspired and positive about it. Check out the slides below. That's all. Now I have a bunch of catching up to do (email, sleep, school work, and of course work at my job. Thanks to both Web Directions and Webmaster Jam Session for a fun week!

View “Creating Sexy Stylesheets” on Slideshare:

Web Technology 2: Module 5

Jina Bolton — Thu Oct 02 23:37:01 UTC 2008

Note: Module 4 is missing because I missed class when I was in Sydney. I'll track down notes from that class and maybe post them later.

Today's class is on MySQL. SQL stands for Structured Query Language. it lets you access and manipulate databases. MySQL is a "flavor" of SQL. RDBMS stands for Relational Database Management System. it's the basis of SQL, and for all modern database systems like MS SQL Server, IBM DB2, Oracle, MySQL, and Microsoft Access. It's stored in database objects called tables, which has columns and rows, with data. How do we talk to the database? SQL statements talk to them. They're not case sensitive. Most common statement is the SELECT * from TABLE_NAME. You can have more than one statements at the same time. Semicolons separate them. Asterisk is a good way to search for anything and everything. Results are stored in a result table called a result set. You don't see a physical table, it's just like a temporary table where your data is held and you can interact with it.

MySQL is the most popular open source database application. It comes with a database server, different client applications, and several utilities. The server stores the actual data. The client applications used for interacting with the server.

The purpose the web site or application dictates how the database should be designed. When creating databases and tables come up with names (identifiers) that are clear, meaningful, easy to type and easy to remember. Each row in a table is called a record. When naming your tables, only use letters, numbers, and underscores. They shouldn't be longer than 64 characters, and they must be unique. The column name is local to its table. It's a good idea, if you can, to keep all column names unique, but easy to remember.

Determine the database's name (must be unique), the table's name, and the column names. EAch column needs a data-type. There are three primary types: text (strings), numbers, and dates/times. Within each of the main types are variants. Choosing a column type impacts performance, so it's good to figure out what type of data you want to use. It is a good idea to include length attributes, to help performance, but be careful to not be too short on the lengths because it can cut off data. Columns can have an empty space. By default, the column will say it's "null" (no value). You can set it to be NOT NULL (forces the field to have data).

Number types can be marked as UNSIGNED, which forces a column to be a positive number. You can also use ZEROFILL, forcing a column to be padded with zeros. You also need to assign a AUTO_INCREMENT to your primary key. An index is a database's way of keeping tabs on the data in the records. A key keeps a table normalized, meaning that the data is separated in to unique items. Primary key: an artificial way to refer to a record. Foreign key is usually a linked primary key in another table.

Identify each column type. Choose a subtype for each column. Set the maximum length for text columns. Identify your primary key. Identify which columns cannot have NULL values. Make any numeric types UNSIGNED if not using negative numbers. Establish any default column values. We'll be using phpMyAdmin (one of the most popular software applications). It's main use is to connect to a MySQL server. Must be accessed through a web browser.

Class giving it a shot... Homework for next week is to create a table to get the data from the user registration form from the homework last week (which I'm behind on). Basically, matching the fields to the data in the table. In a document (word, or whatever), draw a map of how that data will relate to the fields in the registration form. Finish comps and HTML/CSS for our web apps.

Principles of Usability: Module 4

Jina Bolton — Wed Oct 01 22:18:01 UTC 2008

Note: Module 3 is missing because I missed class when I was in Sydney. I'll track down notes from that class and maybe post them later. Late on homework, too, because of my trip, so have a lot of catching up to do. I'll get back on track. Also, I'm sick, so if my notes seem more rambley or less coherent than before, apologies. Anyway, here are today's notes.

Today is about user-centered design, based on don Norman's the design of everyday things. Critiquing websites students made. User-centered design is designing to facilitate and enhance the user experience. Use constraints to make it clear what actions are available. make things visible, system conceptual model, alternative actions, results of aactions. Make the system state easy to evaluate. Use natural mappings between intentions and required actions, actions and effects, feedback and system state. Make instructions unnecessary or at least easy to remember.

7 ways to make user tasks easier:

Use both knowledge in the head and knowledge in the world

Knowledge in the world makes learning easier, supports the casual or infrequent user. Knowledge in the head: characteristic of the expert user, more efficient than reliance on external knowledge alone.
Simplify the structure of tasks

Don't stress the short-term memory: minimize irrelevant information, reduce number of choices. Support the long-term memory: good conceptual model, memory aids.
Make things visible

No “mystery meat” navigation, Show users what their options are, Show users where they are, Give feedback about their tasks, Give feedback about the state of the system.
Get the mappings right

Help the user develop an accurate mental model of how the system works. Use natural mappings. Use metaphors, when appropriate: MP3 players use cassette controls, Folders and documents on the computer.
Use natural & artificial constraints

Electrical plugs, CDs, Ethernet cable, USB port. Can you put any electrical plug in any power outlet? Can you put the CD-ROM in upside down? Can an ethernet cable go in the USB port? Constrain user input to do only the right (correct) action. Form validation & valid values to prevent errors.
Design to accommodate human error

Every error that can be made will be made! How will your system deal with it? Help users recover from errors. Help users learn from errors. Don’t leave users stranded
When all else fails, standardize

When only arbitrary mappings are possible, Standards may be very hard to learn, Standards need only be learned once, Famous arbitrary standards. Automobile controls. qwerty. clockwise. Can you think of others?

The User Centered Design Process - How to design a usable user experience.

Stage 1: Requirements

Formulate design problem, Determine target audience, target platforms, user goals, business goals, etc. Evaluate existing and competing designs. Competitive analysis, user interviews, surveys, heuristic analysis. Detail project goals and parameters.
Stage 2: Conceptual design

Work out functionality (what will the product do). Use cases. Task analyses. Information architecture.
Stage 3: Mockups & prototypes

Visual representations (mockups). Interactive representations (prototypes). Produced rapidly, evaluated, refined, evaluated again, etc. Paper prototyping, wire frames. User testing, focus groups, heuristic analysis.
Stage 4: Production

Final product created. Final visual design established. Data entry, image creation & coding. Quality assurance (QA), user testing, field testing
Stage 5: Launch

Final testing. Product or service goes live. Verify product/service correctness

Throughout all these stages is evaluation... evaluation evaluation evaluation. Create feedback systems for each stage.

Iterative design: progressively refine the design, evaluate usability early and often, each version is more usable than the last, evaluate against performance criteria (or benchmarks) - example: 80% of people rate design higher than 6 on a 7 point scale from very obscure to very obvious. plan types of evaluation and number of cycles in advance.

Types of usability. Mining for problems. What are the problems with this design? Criterion testing. Does the design meet our defined goals? Comparison testing. Which of these designs is better? Homework: revise sites (or in my case, just do it.)

Make it Modular

Jina Bolton — Mon Sep 29 23:06:01 UTC 2008

Whoa. Through looking at my stats, I happened to find that .net Magazine published my article today. I wrote this article for the April 2008 magazine issue, and today they published it online. I'm very excited to not only find this out, but to also find it featured so prominently on the home page! Very, very cool. Give it a read?

Unrelated Note:
If you haven't already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Web Technology 2: Module 3

Jina Bolton — Fri Sep 19 00:04:00 UTC 2008

Due next week: compare and contrast 2 applications (one being a desktop application, and the other being a web application), Today's class is a PHP Introduction. PHP is a server-side scripting language for creating dynamic and interactive websites. Open source, free alternative to competitors like Microsoft's ASP. Often used together with Apache web server (but is not limited to) on various operating systems. PHP Hypertext Preprocessor, original name was personal home page? Web server interprets PHP code, not visible on the client side. Supports database (like MySQL) and may contain text, html tags, and scripts. Can run on different platforms.

<?php is the opening tag and ends with ?>. Can be placed anywhere in the document. Must end with a semi-colon. Two basic statements to output text: echo (more common) and print. Comments: // (single line), and /* ... */ (multi-line). In class exercise... (opening Dreamweaver).

Like JavaScript, PHP has variables for storing values, strings, arrays, numbers, function results... Unlike JavaScript, all variables start with a ($) dollar sign. Like JS, variables are alpha-numeric — it can start with a letter or underscore (but not a number). You can have mathematical or logical operators. Case-sensitive. Can use keywords (like return or var) but it's recommended not to. Single or double quotes are okay, just be consistent. Strings (like in JS). The concatenation operator ( + ) in JS is different in PHP... In PHP it is ( . ) (So "Hello" . "World" instead of "Hello" + "World"). PHP also ignores white space. The strlen() function is used to find a length of a string (counts the number of characters) and can also be used in JS. Example: <?php echo strlen("Hello world!"); ?> would output 12. Both PHP and JS start counting at 0. Getting string lenghts is often used in functions (for example: counting characters in a URL). The strpos() is used to find the position for a string or character within a string. If match is found, it will return the position of the first match. If it is not found, it will return FALSE. Operators are similar to JS, but not all. There is no ===. Just the two (because it doesn't need to find the variable type). There is && which means and. || means or. ! means not. += (x+=y) Example: x=x+y.

<?php $myname = "Jina"; echo $myname; ?> will simply output "Jina".

If else statements are same concept as in JS, but it uses elseif instead of else if. Switch statements concept is also the same, and is a quick way of doing the if else if statements. Break basically says "if this is true, don't worry about the rest of this function". While and for loops are similar as well.

Going over different statements (for, while, foreach, etc.). Will go over these in more detail next week. More than 700 built-in functions available. All start with the word "function()". Name the function so it's easier to understand what it does. Use curly braces like in JS. You can add parameter in between the parenthesis which is like a holder (like variables). Functions can be also used to return values. arrays can store one or more values in a single variable name. Each element in the array has it's own ID so it can be easily accessed. Three types: numeric (automatically assign an ID or manually assign an ID), associative (ID key is associated with a value), multidimensional (each element in a multidimensional array can also be an array).

PHP forms use $_GET and $_POST. They can retrieve information very quickly. It's good to do validation on both the client side and the server side. A database needs the server side to talk to the browser. Without it, it can't. action="index.php" means it's running the code within that file (index.php). Null means there's nothing there.

Also as homework, create a sticky form (which we just created). Make a list of all the pages that were in the Sitemap (done last week) in HTML. Instructor's notes will be uploaded by tomorrow night in the directory.

Unrelated Note:
If you haven't already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Principles of Usability: Module 2

Jina Bolton — Wed Sep 17 23:49:01 UTC 2008

Started class with a quiz and handing in homework... Usability on the cheap. Different techniques: formal usability inspection, consistency inspections, standards inspections, guideline reviews, pluralistic walkthroughs, cognitive walkthroughs, heuristic evaluation. Heuristics: rules of thumb or guidelines, what are good practices? Examples: links should be obvious. Text should be easy to read.

Heuristic Evaluation is a usability engineering method for finding the usability problems in a user interface design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics").
—Nielsen and Molich, 1990; Nielsen 1994

Have multiple people look for issues to catch as many as possible. Brief introduction to Jacob Neilsen's work, and his mind-changing, and somewhat controversial ideas. His Usability Heuristics:

Visibility of system status: keep users informed about what is going on, appropriate feedback.
Match between system and real world: speak the user's language, use familiar, real-world conventions, natural logical order.
User control and freedom: let users back out, exit (support undo and redo).
Consistency and standards: use standard conventions and language to help users know what to do.
Error Prevention: better than a good error message is preventing that error in the first place.
Recognition rather than recall: make objects, actions, and options visible. Avoid mystery meat navigation.
Flexibility and efficiency of use: accelerators (keyboard shortcuts) speed up the interaction for the expert user, allow users to tailor frequent actions.
Aesthetic and minimalist design: avoid irrelevant or rarely needed information, keep things focused.
Help users recognize, diagnose, and recover from errors: errors should be in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Help and Documentation: even if it's better for a system to be used without documentation, it may be necessary to provide help and documentation. Make it easy to search, focused to the use's task, don't be too large.

Exercise: heuristic evaluation of petrosains.com.my. Assignment: do a heuristic evaluation of whitehouse.gov. Organize your report by the 10 heuristics. Use example from appendix in textbook, page 444, and do a professional report. Also do reading assignments.

Unrelated Note:
If you haven't already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Interviewed at SitePoint + Sydney Trip

Jina Bolton — Wed Sep 17 11:49:00 UTC 2008

This is just a quick update regarding the new interview that SitePoint posted today in preparation for my upcoming speaking gig next week at Web Directions South in Sydney, Australia. I leave this Friday night, and I'm totally stoked (which is how I get any time I get to visit a new country (or new continent, for that matter). Hope you like the interview, and I look forward to seeing and meeting everyone that's also going to Sydney!

Unrelated Note:
If you haven't already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Robot Lamp

Jina Bolton — Tue Sep 16 19:05:01 UTC 2008

Okay, of all the things I've posted that I want, this Robot Lamp Base at Urban Outfitters needs to be in my apartment NOW!!! Make that happen, okay? Thanks!

Unrelated Note:
If you haven't already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Sushi & Robots

Why all the hate for 2008?

Principles of Usability 8

Sleepy kitty making biscuits

Robots don't know anything about Twitter.

Web Technology 2: Module 7 (again)

Principles of Usability: Module 7

I made a blue me.

Fifty People One Question

Web Technology 2: Module 7

Principles of Usability: Module 6

Web Technology 2: Module 6

Principles of Usability: Module 5

Web Directions South and Webmaster Jam Session

Web Directions South, Sydney

Webmaster Jam Session, Atlanta

Web Technology 2: Module 5

Principles of Usability: Module 4

Use both knowledge in the head and knowledge in the world

Simplify the structure of tasks

Make things visible

Get the mappings right

Use natural & artificial constraints

Design to accommodate human error

When all else fails, standardize

Stage 1: Requirements

Stage 2: Conceptual design

Stage 3: Mockups & prototypes

Stage 4: Production

Stage 5: Launch

Make it Modular

Web Technology 2: Module 3

Principles of Usability: Module 2

Interviewed at SitePoint + Sydney Trip

Robot Lamp