Good article on UX testing

http://www.fastcodesign.com/3031942/google-ventures-on-8-shortcuts-for-better-faster-design-research

Google Ventures On 8 Shortcuts For Better, Faster Design Research

What questions do you want to answer?
Before you do any work on a research study, clarify what you want to get out of it. For example, would it be most useful to figure out:

  • Can new customers understand and figure out how to use the product?
  • What are customers’ existing workflow and pain points?
  • What are pros/cons of competitive products?
  • What are customers’ attitudes?
  • How satisfied are existing customers with the product?
  • How does new customers’ usage change over time?
  • Which design performs better?

Custom Google search

  • Create CSE http://www.google.com/cse/setup/basic?cx=00123237129537399800390:cusdfsdfp1pkwpc
  • Set query parameter  to q_as to avoid conflicts with WordPress and Drupal ?q string
  • Add search box with redirect to another page<!-- BEGIN: Search Form ----- -->
    <div id="search-form">
    <gcse:searchbox-only resultsUrl="/googlesearch" queryParameterName="q_as"></gcse:searchbox-only> </div>
    <!-- END: Search Form ----- -->
  •  Add code on page /googlesearch to display results only
    <gcse:search linktarget="_parent" queryparametername="q_as"></gcse:search>
  • Configure options for colors on the search page and colors of button in search engine
  • Optionally you can link site search to webmaster tools for more complete info

Adding image thumbnails to search results

add code  https://developers.google.com/custom-search/docs/structured_data#addtopage

<!–
    <DataObject type=”action”>
      <Attribute name=”label” value=”Download”/>
      <Attribute name=”class” value=”download”/>
    </DataObject>
    <DataObject type=”action”>
      <Attribute name=”label” value=”Fullscreen View”/>
      <Attribute name=”class” value=”fullscreen”/>
    </DataObject>
  </PageMap>
–>
Replace google  image in search box
<style>
      .gsc-input input {
          background-image: url('/search_files/search_bkgr.png') !important;          
          background-position: right !important;
          background-repeat: no-repeat !important;
} </style>

Using standard Drupal script to hide/show blocks

<script type="text/javascript" src="/misc/collapse.js?n5t2n7"></script>
 
 <fieldset class="collapsible collapsed" id="search-filters" >
 <legend><span class="fieldset-legend"><a class="fieldset-title" href="#"><span class="fieldset-legend-prefix element-invisible">Hide</span> Change Search Filters </a> </span></legend>
 
 <div class="fieldset-wrapper" style="display:none"> 
 <?php $block = module_invoke('views', 'block_view', '-exp-class_actions_advanced_search-page_1');
 // https://api.drupal.org/api/drupal/includes%21module.inc/function/module_invoke/7
 print render($block); ?> 
 </div>
 </fieldset>

Css for round user images


.user-picture img {
display: block;
width: 100%;
height: auto;
max-width: 220px;
-webkit-border-radius: 220px;
-moz-border-radius: 220px;
-ms-border-radius: 220px;
-o-border-radius: 220px;
border-radius: 220px;
}

Custom Google Search GSE configuration

Using this code you can display results of GSE on any page

<gcse:searchbox-only resultsUrl="/yourpage" queryParameterName="q_as"></gcse:searchbox-only>
 .gsc-input input {
          background-image: url('/search_files/search_bkgr.png') !important;
          background-position: right !important;
          background-repeat: no-repeat !important;
          }

http://libretechtips.com/tips-drupal7-drupal6/how-use-google-cse-drupal

 

http://www.hongkiat.com/blog/wordpress-google-cse/

 

adding thumbnails – https://developers.google.com/custom-search/docs/structured_data#addtopage

<!–

    <DataObject type=”action”>
      <Attribute name=”label” value=”Download”/>
      <Attribute name=”url” value=”http://www.scribd.com/document_downloads/20258723?extension=pdf”/>
      <Attribute name=”class” value=”download”/>
    </DataObject>
    <DataObject type=”action”>
      <Attribute name=”label” value=”Fullscreen View”/>
      <Attribute name=”url” value=”http://d1.scribdassets.com/ScribdViewer.swf?document_id=20258723&access_key=key-27lwdyi9z21ithon73g3&version=1&viewMode=fullscreen”/>
      <Attribute name=”class” value=”fullscreen”/>
    </DataObject>
  </PageMap>
–>