Recap: Share Your Favorite Application Night
At tonight’s Refresh Detroit meeting, we had an excellent time talking about and sharing our favorite tools and applications. While we didn’t have big attendance at the meeting, our discussion lasted almost two hours.
We took time to demo several applications and shared our experiences on how the applications improved our workflow. I know I have a few more tools to add to my work toolbox.
Here’s a list of some of the applications we discussed:
- Evernote: free note taking application that seamlessly synchronizes your notes on the web, desktop, and mobile. It’s easy to take notes, scan images, capture screenshots with the browser Web Clipper, and share notes with others (premium version only). Not sure what to do with all those business cards you collect at events and conferences? Scan them with your phone, add to Evernote with a note. Evernote uses OCR (optical character recognition) to scan the text in the business card so you can easily search at a later time.
- EchoSign: online electronic signature application built into the free Adobe Reader application. If you’ve ever had to send hard copy contracts back and forth via post, or scan PDF signature pages, this application is for you. Sign your contracts and other documents in minutes with EchoSign. The Federal E-SIGN Act makes online electronic signatures equivalent to a written signature
- Trello: online project management application that organizes your work into boards. The interface is all visual, updates in real time, and you can easily drag and drop tasks, lists and archive weekly work.
- Cleo: Cleo (Compact Library Extension Organizer) is a Firefox add-on that allows you to combine themes and extensions into one package. You can easily share your favorite extensions by creating a package. Or install the package in a new Firefox profile.
- jsFiddle: An online application that allows you to test your HTML, CSS, JavaScript code. While there are many similar online applications, jsFiddle is one of the best-known and most-used.
- Axure: Desktop application used to create wireframes, mockups and interactive prototypes. Though the cost might be beyond the freelancer, Axure is the tool of choice for many large organizations and corporations.
- Balsamiq and Mockingbird: Online wireframe and mockup applications. Many web developers and user experience professionals have moved from traditional desktop applications to online applications for ease of use and cost.
Thanks to Washtenaw Community College for hosting our meeting.
Book Review: 100 Things Every Designer Needs to Know About People
After reading Susan Weinschenk’s 100 Things Every Designer Needs to Know About People, I found it a great reference for solving design problems. Susan breaks the book out into 10 self-contained sections that discuss the psychology of how people see, read, remember, think, and feel.
Susan does a great job of keeping each topic very digestible, with simple language, while still going deeper with a more scientific approach to things.
This book promises to answer questions every designer has had over the course of his or her career. I know I’ve asked a few of these questions myself:
- What line length for text is the best?
- Are some fonts better than others?
- How can you predict the types of errors people will make?
- What grabs and holds attention on a page or screen?
Each section is packed full of valuable information about how and why we humans think the way we do. One of my favorite sections was about how people see. A lot of the things in this section were basic reminders, like how red and blue colors are hard on the eyes when used together. Others were more in depth, like the various meanings of colors throughout different cultures, and how people see cues that tell them what to do with objects. The latter is especially important in user interface design, because if you want your user to click a button, it should look like a tactile button.
For web and user interface designers, I would recommend the sections about how people see, read, focus their attention, and decide. The takeaways from these sections were especially helpful in designing interfaces.
Overall I found this book a staple during my work day, I often refer to it when trying to solve an issue when I have to ask “what would the user do?” I would recommend this book to all of my fellow designer friends or to friends who are just interested in learning about how people interact with things in general.
You can purchase Susan’s book online at Peachpit in paperback and ebook format. Use our Peachpit User Group coupon code (UE-23AA-PEUF) to get 35% off your purchase.
Recap: From Documents to Apps: Evolving an Open Web – Molly Holzschlag
This month we were honored to welcome Molly Holzschlag to Refresh Detroit. Molly is considered one of the godfathers godmother of the Web. Her talks centered around “From Documents to Apps: Evolving an Open Web”. As an advocate for open standards, she outlined how the open web allows for the empowerment of all individuals via global access.
She started her talk with a quote from Hillman Curtis that I am very fond of and wanted to share:
“Be prepared to reinvent yourself. Be prepared to go out on a limb occasionally, and be prepared to do the things that you feel strongly about”
- Hillman Curtis
I’m not going to give you a play by play of her talk because she was kind enough to let us record it. The full audio is available below and on Soundcloud.
A few things that stood out for me while she went through her presentation and interacted with the audience were:
- Setup a personal advisory committee, no one person knows everything about the web.
- It’s survival of the most adaptive, not survival of the fittest.
- On the Web nothing matters, browsers, OS, data format, or language.
- The definition of “open” often means transparency. But the preference is to mean authenticity.
- The many things rule: Never look at one thing and thing it is just one thing.
- Adopt a error forgiveness. We cannot know it all.
- ARIA is the important piece that most Web sites are missing.
Molly gave us five main points to move forward
- Support existing content
- Ensure interoperability
- Define the user agent behavior (Solve problems from real-world issues)
- Better handle errors
- Evolve what we have
Some pictures from her talk
Recap: The Tricky Business of Website Testing
You might think software testing would be a bit of dry topic but Christopher Martello’s talk at the November Refresh Detroit meeting was far from it. Chris gave us a look at what website testing is, who does it, why they do it, and numerous excellent resources that everyone can use for testing.
Chris has a lot of experience to draw from. He has been doing software testing for about 12 years. He’s done manual testing, automated testing, been a team leader and a project coordinator. Currently he’s a Build & Deployment Coordinator.
He started with an explanation of why we need testing and what makes testers tick. Testing identifies issues that get missed during development. Tester’s are often in between the developers and the business analysts, making sure the functionality is in balance with the requirements. They can function as the gatekeeper to production, determining when a build is good enough for a release. “The most compelling factor for me as a tester is I want to make sure the customers … have a good experience,” said Chris.
Software testers are the type of people who like to find defects and issues. They identify the intended and unintended ways users can go through an application. They also make sure all the intended scenarios work. They incorporate quality throughout the process. It’s important that IT finds the bugs. “You don’t want the user to find the bugs”.
The testing process consists of planning tests, running through them, and reporting the issues you discover. Chris discussed how testing is one part of the overall quality assurance process for your website or application. “It helps build confidence in your application, the team can say it has been tested.” Chris briefly touched on some of common terms and testing methods used in software testing including functional testing, automated testing and load and performance testing.
He then discussed how NOT to test, which included:
- Letting the users do the testing
- Saying “I’ll test later”
- Saying “Works on my computer.”
He discussed other types of testing including standards and browser testing.
Standards testing involves determining if a web site or application meets HTML, CSS, accessibility, security and the evolving mobile standards.
Browser testing is a very important aspect website testing. Unfortunately its difficult to cover the ever increasing number of web browser and operating system versions. Graded presentation standards are typically developed to determine what browsers your web application works on and to what level. You can base your standards on your own internal application logs and on browser statistics found on sites like Stat Counter’s Global Stats. “You should probably be tailoring your browser standards to what your audience is,” said Chris.
He went on discuss the specialized craft of load and performance testing. “It’s almost like designing a very complex scientific experiment”, Chris explained. Its important for identifying bottlenecks and break points in your application but it can take a great deal of time to set-up.
There’s also manual testing. “You got to have some eyeballs and some hands on”, to test if your application meets the requirements and has the intended functionality. A few examples Chris gave of manual tests included proof reading the site’s fine print, checking if the correct phone number is listed, and making sure a form’s error validation is working correctly.
Chris then provided a list of tools and services that you can use for testing. I’ve listed some of them here but for a complete list I recommend you check out his slides.
- SnagIt – A handy screen shot tool.
- IETester – A way to test multiple versions of the Internet Explorer on one machine (free)
- BrowserStack – A complete cross browser testing service that creates virtual machines for you.
- Xenu Link Sleuth – For testing links on your site. (free)
- SQA Forums – Software Quality Assurance forums
- Cacoo – Free online drawing and wireframe sharing
Some of the Firefox add-ons that Chris suggested we check out are:
Automation is where it’s at in software testing. According to Chris, “if you execute a test case more than three times then you should automate it.” It can save a tremendous amount of time. The downside is sometimes you don’t get support for the tools, the budget, and the training needed. While expensive, Chris likes the
HP QuickTestPro testing tool. Some other automated testing tools are:
- Selenium – an open source test automation tool.
- Rational Robot
- TestPlant EggPlant
Two load and performance testing tools Chris mentioned included Rational Performance Tester and HP LoadRunner.
Some issue and defect tracking tools Chris mentioned are:
Chris wrapped up the talk with some demos of some of the tools he discussed and answered questions from the audience. Throughout the presentation he provided examples, interesting anecdotes, and some fun QA jokes. Refresh Detroit would like to thank Chris for his excellent presentation.
Below are Chris’ slides:
Recap: Contracts, What You Need to Know
It was a pleasure to have attorney Mary Novrocki speak at Refresh Detroit again, she last spoke to our group about freelance legal issues in spring 2009.
Mary started her talk with background on contracts and why they’re important for you and your client. She explained that including a glossary of the terms used in contracts, near the beginning of the contract, will help clarify the meaning of the terms.
Mary explained the components of a contract, which include:
- Parties – the participants in the contract
- Recitals – statements explaining who the parties are and what they intend the contract to achieve
- Subject matter – the services, goods/property that is the subject of the contract
- Consideration – payment; something of value received by one party to the contract from the other
- Warranties and representations – guarantees by one or both of the parties regarding something that has or will happen as a result of the contract.
- You, the freelancer will provide specific services, while the client will pay for those services, according to specific milestones met.
- Risk allocation – disclaimers, indemnities, etc.
- Conditions – the what ifs – happenings that, if they occur, will stop the transaction from happening or will undo it
- Important to both parties
- Think of past projects where things didn’t go as planned. Perhaps payment was delayed, or content not delivered. Consider what the consequences are, and clearly state what will occur.
- Performance – what the parties expect from each other regarding work to be performed or goods/property to be delivered
- Dates and term – essential dates of delivery of goods/property; a term of work.
- Boilerplate – governing law, notices, survival, waivers, notices, contract construction, etc.
- This is the area that attorneys know well.
- What will be the governing law? The county and state you live in? Or the county and state your client lives in? What works best for you?
- Signatures – by all parties to the contract
- In Michigan, digital signatures are considered legal.
The elements of a contract were drawn from Feldman, Robert A., Michigan Basic Practice Handbook Chapter 8: Drafting Contracts, The Institute of Continuing Legal Education, © 2011.
Mary ended her talk with a discussion of the Michigan landmark case about mutual mistakes in contracts from none other than nearby Plymouth, Michigan.
Michigan Legal Milestone: Rose of Aberlone
The case involved the sale of a cow in the 1800′s, between T.C. Sherwood of Plymouth, Michigan and Hiram Walker (yes, the Hiram Walker of the Hiram Walker & Sons company in Windsor, Ontario, Canada).
The Case of Rose of Aberlone
Both parties thought the cow was barren, negotiated a price, and confirmed the price in writing.
However, when Sherwood arrived to take the cow, Walker refused to sell the cow. Walker had discovered the cow was pregnant, which increased her value.
The Michigan Supreme Court ruled Hiram Walker could rescind his agreement to sell the cow, due to a mutual mistake.
Here’s a closer look at the plaque that stands in Kellogg Park in downtown Plymouth, Michigan commemorating the case.
Ancient Wisdom and New Media Content Strategy
Rebecca Carter of Quicken Loans was the guest speaker at Refresh Detroit’s September meeting.
Utilizing some great examples from her work experience and a dash of ancient Chinese wisdom, Rebecca delivered useful information that we can use in our organization’s content strategy.
Overview
She started with a general overview of content strategy. Paraphrasing Kristina Halvorson she described it as “planning for content creation, delivery and governance.” She reviewed the wide variety of tasks and tools that the field of Content Strategy encompasses including:
- Marketing
- Writing
- Content analysis
- Metadata
- Taxonomy
- SEO
- Editorial strategies
- Developing new forms of content
- Information architecture
- User experience
- and much more.
A Content Strategist “knows intuitively that everything is content”, says Rebecca.
Why do Content Strategy?
Rebecca had to convince some at her company why it was important to have a Content Strategy department. “So we can get smarter about everything,” she said. Reasons for Content Strategy also include:
- So content can be repurposed
- Business can grow strategically
- To maximize the user experience and comprehension.
Wisdom
Rebecca wanted to give the Refresh Detroit audience some key points that they take action on in their own organizations. She used bits of wisdom from the ancient text The Art of War by Sun Tzu as an interesting way to present her points.
The control of a large force is the same principle as the control of a few men: it is merely a question of dividing.
Know who you are talking to. Create persona-driven messages. You can use in-house data, market surveys and even your sales force to find out whom you’re developing your content for. Quicken Loans uses personas created by an independent market research company. They find them incredibly useful in crafting their content for their audience.
The general who wins the battle makes many calculations in his temple before the battle is fought. The general who loses makes but a few calculations beforehand.
Plan and determine your customer lifecycle. Discover the steps your client takes from initial awareness to becoming and advocate for your brand. Rebecca recommends lining up the different steps of your customer lifecycle with the personas you’ve developed. This helps you get “great customized targeted messages and … your conversions can go up.”
If words of command are not clear and distinct, if orders are not thoroughly understood, the general is to blame.
Provide your writers with the tools they need. Develop style guides, templates, samples, brand guidelines, checklists to help your team with consistent implementation.
Opportunities multiply as they are seized.
“Every time you create content you have to think about all the different ways it can be reused”, explained Rebecca. Can it be used in a press release? Used for social media? Can it be shared with a content partner? Plan to reuse and share your content.
He who know when he can fight and when he cannot will be victorious.
“Identify your key performance indicators and start making testing plans for that.” Its important to find ways to communicate testing results to you team so they know where you need to concentrate you efforts.
Some sites Rebecca recommends following are:
Alistapart.com
Contentini.com
blog.braintraffic.com
Shellybowen.com
Conversationagent.com
Eatmedia.net/blog
Futurelab.net/blogs/marketing-strategy-innovation
Rebecca concluded her talk with a great Q&A session where she shared some of the issues that Quicken Loans has run into with their content strategy and how they’ve worked to improve them.
Below are the slides from Rebecca’s presentation.
Recap: Taking the Bulldog to 30,000 Unique Monthly Visitors
Thanks to everyone who came out July 17 to hear Dave Lingholm present and celebrate our five-year anniversary.
Dave discussed the Detroit Regional News Hub and how their focus on building relationships, both online and offline, has led to success.
Check out Dave’spresentation below (graciously recorded by Mike Evans).
Refresh Detroit – Taking the Bulldog to 30,000 from magic6435 on Vimeo.
DudaMobile: Simply Awesome!
Recently, I tried out DudaMobile. They just launched their new, self-serve platform that lets existing website owners create a mobile version of their website and enable auto redirects when accessed via mobile devices.
This is essentially a boon for small business owners. Ones who don’t have much complexity on their website, but since the mobile phones are now an important channel for bringing in more revenues (or providing a better Quality of Service). DudaMobile instantly creates a mobile version of their existing site. For free. This means a LOT of savings in terms of time, effort and money.
The mobile website can also be customized to add themes and custom colors. They also provide some cool widgets – particularly apt for a mobile site: click to call, SMS sender, maps and directions etc. Still, if you happen to have a developer in the office who wants to improve the look and feel, you can choose to do so as well – simply using CSS and HTML.
Behind the scenes, my guess is that there is a service that detects HTML elements like hyperlinks, image divs, tables etc and applies a relevant jQuery layer on top of it. So the cool mobile-optimized buttons, background colors, resized images etc. Anyone who has a different discovery, feel free to share.
Here are two basic advantages over similar competing products:
- Mobstac: relies mainly on rss, cms etc to draw/paint the site (or so it seems). But seems that they generate automatically. But one MAJOR disadvantage: most of the websites I tried couldn’t be converted. Seems they really have to either rethink their choices or log in a ton of man-hours before this could really knock off everyone else.
- Moably: asks for email/signup even before previewing. This is SUCH a major turn-off. Totally not done. Also doesn’t appear to automate the process. Seemingly they would offer a quote to develop the website. Hence, not really a true competitor in terms of time/price. Off course, the quality could be fairly different. Haven’t tried, no comments on that.
For the free version, the mobile website will have some ads on every page with a DudaMobile footer. A free site is also limited to 10 pages and 500 MB. The free version URL is also the Duda URL (dudamobile.com/yourcompany) Mobile site analytics are also included in the free version, which in my opinion, is a huge plus.
For $9.99 a month, DudaMobile offers an ad-free site with customizable footer. Also include cool widgets like SMS sender, maps & directions etc. Also the URL for a paid site is personalized (m.yourcompany.com) EMail support is available for the paid version. Per their website, they are soon bringing in Google Adwords integration too.
Now thats the way to go Duda!
August 17 – Taking the Bulldog to 30,000: My Contribution to the Detroit Regional News Hub
We are happy to announce our next meeting on August 17, 2011 with David Lingholm at Quicken Loans!
Recap: Web Design Process… More or Less
For our July meeting we were lucky enough to have Colleen Case and Maria Gosur from Schoolcraft College to talk about the Web Design Process.
The talk was about a framework for the web design process, taking 45 hours of teaching time and compressing it to 45 minutes. They discovered 40% of the population is re-tooling skills to the web, while 60% have grew up with the skills and looking for something advanced. Colleen is an interactive teacher, shifting from sage on the stage to guide by the side.
“The medium is the message”
- Marshall McLuhun, 1964
The content of the communications is blended with the medium. With the way it is sent, the interface is content.
Framework for team dynamics
- Together everyone achieves more
- It starts with a common vision
- Creating a swing
Process (stages of development that are happening concurrently)
- Define the project
- Scope of the project
- Information architecture
- Build and integrate
- Site publishing
[blackbirdpie url="https://twitter.com/philltran/status/91287274905546752"]
Define the project
- Figuring out who is on the team and what they do
- It’s important to define these up front
Scope of the project
- Common vision, defining an audience, review the data, technical needs
- Audiences can mean more than one
- How do we talk to the audience as a human
- Persona’s should have names and refer to them as actual individuals
- How can we best deliver your content to your audience
- The scope of a website doesn’t end when it launches, it stretches for years after.
- You can’t jump ahead in the process
Information architecture
- Looking at all the information and start recognizing patterns
- Sticky notes are a great way to visualize information to recognize patterns
- Chunking is grouping information
- Queueing is prioritizing information
- Filters is creating unique access for multiple users
- Abstracting is creating a consistant look from page to page to orient the user and allow them to get around
- Where does the complexity of the site lie? In the back end or frontend for the user?
[blackbirdpie url="https://twitter.com/philltran/status/91291238355046400"]
Build and integrate
- File management and naming conventions
- Optimizing multimedia
- Populating content
- Site testing, not just functional but also the ascetics
Site publishing
- Site Launch
- Training, Updates, Maintenance
- Debrief
[blackbirdpie url="https://twitter.com/refreshdetroit/status/91297540523298816"]
Things often overlooked
Your client knows the problem. Design is problem solving.
The project manager talks to the client so there is a single voice and ears for the entire project. One person can have multiple roles.
The content expert might not always be client. Writer/Editor. Usability Testing, Information Architect. Technology Researcher.
Visual designers are the person on the team that everyone’s favorite. Photographer. Illustrator. Multimedia Designer. Bringing the illustrator in early on can yield a lot of illustrations that explain the process to get everyone on the same page. It can expand understanding.
Technical designers look at everything that makes the website possible. Database developer. IT security specialist.
Usability designer. Test/focus group coordinator. Search engine optimization manager. Social media manager. Site analytics. Transition coordinator.
We consume web content as snacks, not meals. We scan, pick and choose what to interact with.
More Information: http://designprocessmoreorless.com/
Archives
- May 2012 (1)
- April 2012 (2)
- December 2011 (1)
- October 2011 (2)
- August 2011 (2)
- July 2011 (3)
- June 2011 (2)
- May 2011 (1)
- April 2011 (1)
- March 2011 (1)
- February 2011 (1)
- January 2011 (1)
- November 2010 (1)
- October 2010 (1)
- September 2010 (2)
- July 2010 (1)
- June 2010 (2)
- May 2010 (4)
- April 2010 (1)
- March 2010 (1)
- February 2010 (1)
- September 2009 (1)
- August 2009 (1)
- July 2009 (1)
- June 2009 (2)
- April 2009 (4)
- March 2009 (5)
- February 2009 (4)
- January 2009 (3)
- December 2008 (3)
- November 2008 (3)
- October 2008 (3)
- September 2008 (4)
- August 2008 (8)
- July 2008 (5)
- June 2008 (5)
- May 2008 (1)
- April 2008 (2)
- February 2008 (7)
- January 2008 (2)
- December 2007 (2)
- November 2007 (3)
- October 2007 (1)
- September 2007 (3)
- August 2007 (5)
- July 2007 (3)
- June 2007 (3)
- May 2007 (7)
- April 2007 (8)
- March 2007 (8)
- February 2007 (3)
- January 2007 (10)
- December 2006 (1)
- November 2006 (5)
- October 2006 (9)
- September 2006 (6)
- August 2006 (3)
Categories
- Articles (8)
- Book Reviews (9)
- Contests (2)
- Events (31)
- Jobs (7)
- Meetings (51)
- News (78)
- User Experience (3)
Post Authors
- Ankur Acharya (1)
- Brad Czerniak (1)
- Brent Mitchell (10)
- Caitlin Potts (2)
- Cara Jo Miller (1)
- Deborah Edwards-Onoro (123)
- Dennis Lembree (14)
- Heidi Blanton (1)
- Jeff Mackey (2)
- Nick DeNardis (8)
- Phill Tran (1)
- Ross Johnson (12)
Popular Tags
Android announcement app august calendar conference content management system david demo design detroit drupal DudaMobile hub internet iOS march may meeting metro Detroit events mobile mollydotcom news night open PDF phonegap process project management quickstart guide recap regional smartphones social media stages startups teaching usability User Experience web web design website xml
Bookmarks
- Accessibility
- Books
- Beginning JavaScript with DOM Scripting and Ajax (Chris Heilmann)
- Bulletproof AJAX (Jeremy Keith)
- Cascading Style Sheets 2.0 Programmer’s Reference (Eric Meyer)
- CSS Mastery (Budd, Moll, Collison)
- Designing Interfaces (Tidwell)
- Designing Web Usability (Jakob Nielsen)
- PHP Solutions (David Powers)
- Web Accessibility (Friends of Ed)
- Standards
- Usability