AXURE PROTOTYPING FOR DRUPAL

Transcription

1 AXURE PROTOTYPING FOR DRUPAL Dani Nordin, Bentley UXC/the zen kitchen

2 Hi. I m Dani. UX Designer and Researcher, Bentley User Experience Center/the zen kitchen UX Lead, Drupal Community Tools Team Co-Organizer, Design 4 Drupal Camp Boston UXD Teacher, General Assembly Boston Author, Drupal for Designers (O Reilly, 2012) Mother of this adorable little diva à danigrrl on Twitter and D.o

3 Let s talk about! A tale of two projects

4

5

6

7

8 I need something we can test.

9 Prototyping in Drupal (Commons) 3-5 content types Node references, OG and Views 30+ hours of labor Results: 1/3 of all ideas/needs demonstrated Could not get stakeholder buy-in

10 Prototyping in Axure 4 hours of labor 8 pages of annotated screenshots, including node/add screens Bene:its/Drawbacks of Approach All ideas/needs demonstrated Specification generated with one click

11 Let s talk about! One Year Later

12

13 Reorganized navigation and content for 98 departments.

14 Set up an internal Announcements model that allowed users to subscribe to specific announcement categories

15 Re-architect the way that departments and staff/faculty members were presented throughout the college s website, including creating an internal faculty/staff directory

16 Re-architect the college magazine, Berklee Today, using a custom taxonomy and content type for display

17

18

19

20 Process 8 months 30+ pages of site maps Prototypes for 6 new features Content models for 3 new areas all in one document that the developers worked from directly.

21 Great, but Can Axure give me production ready code?

22 Alas, No. Will never create production- ready code Can only mimic database- type interactions, e.g. search, data entry, etc. Some interactions, e.g. dropdown menus, are much easier to prototype in HTML/CSS

23 BUT you can Go beyond wireframes into interactive prototypes that can be tested and iterated before development time is spent Comment and discuss with distributed teams online Annotate as you go, making it easy for devs to see your thought process and break down for implementation Work more efmiciently with multiple pages, styles & masters Create team projects that allow collaboration with other team members directly in the document

24 When you need to work in Axure When feedback comes from many different sources When things are likely to change frequently When working with smaller, foundational slices of the experience, e.g. site navigation or a new section of content When you need to get the experience right before you commit things to code

25 WHAT CAN YOU CREATE IN AXURE? Common Deliverables

26 Site Maps

27 Content Models

28 Prototypes

29 Documentation and Discussion

30 ALL IN THE SAME DOCUMENT! Pretty cool, huh?

31 TOP 10 TIPS FOR GETTING THE MOST FROM AXURE Common Formats and Tools that will help.

32 1. Start with the Core Training 6 Tutorials in 1 hour will teach you most of what you need to know about working in Axure.

33 2. Download some widget libraries libraries Creates nicer defaults to make building wireframes easier. Favorites: FontAwesome, EE Callouts, Web Widgets by ProtoFive

34 3. Set up an AxureShare account Automatically generate prototypes to AxureShare and discuss them with clients and collaborators Free for up to 1000 prototypes!

35 4. Annotate! Page Notes lets you put notes on each page explaining goals, considerations, etc. Annotating elements in Widget Notes allows developers and stakeholders to see rationale, interaction intentions, etc. Annotations are exported into SpeciMications Developers can work directly from annotated prototypes

36 5. Work with Masters Lets you re- use elements on different pages of the prototype Makes iteration easier

37 6. Set up team projects Team > Create Team Project from File OR Team > Get and Open Team Project Lets you collaborate on a prototype with others on the team Check Out and Check In to make changes.

38 7. Use FontAwesome for icons Can adjust color and size without loss of Midelity Requires FontAwesome to be installed on computer Requires adjustment to prototype generator

39 8. Set up Adaptive Views Project > Adaptive Views Has some standard presets already (Tablet, Phone, etc.) Lets you set up your own Do all your work in Base, then adjust in the other views as needed.

40 9. Set up Grids Arrange > Grid and Guides > Create Guides 4 presets: 1200 grid 12 column & 15 column 960 grid 12 & 16 column

41 10. Work with widget and page styles Lets you set up default styles including fonts, colors, etc. Makes going from low to high Midelity easier Can adjust color/grayscale, page sketchiness, etc. with Page Styles

42 BUT WHAT ABOUT DRUPAL???

43 Prototyping in Drupal: Drawbacks Time and labor- intensive for complex features Much harder to give up on code and iterate when needed Not great for rapid iteration

44 Prototyping in Drupal: Benefits Can turn prototype into production code easily Can play with content models and relationships more easily Help understand how Drupal s infrastructure impacts the UX of what you re building.

45 Prototyping in Drupal: When to do it When you know exactly what you are building When you re setting up initial conmiguration When you need to think through how Drupal does things.

46 THE PROTOTYPING PROCESS

47 Step 1. Identify which pieces of the project need to be prototyped Which slices of the experience require the most stakeholder input or hand- holding? Are there sections of content that have unique needs? Are there slices of the experience where development would be too hard to reverse if the solution doesn t work out?

48 Step 2. Determine the goals of the prototype Testing? Information architecture and content modeling? Stakeholder feedback? Documentation for developers?

49 Step 3. Decide what pages and features need to be included. Sketch. And Sketch again.

50 Step 4. Set up your base layers Adaptive Views Page grid(s) FontAwesome

51 Step 5. Set up your header and footers Logo Placeholder Navigation Search Box Donate Button

52 Step 6. Use masters for common elements Apply to all pages, or just a few

53 Step 7. Put in the other pages Use masters where appropriate Create dynamic panels and interactions to link

54 Step 8. Annotate as you go Widget notes allow you to explain thinking and implementation notes behind specimic elements Page notes allow you to focus on page- wide goals and concepts

55 Step 9. Publish to Axure Share Make sure FontAwesome is made available in specimication generator Create custom generators for different needs, e.g. testing vs. stakeholder feedback.

56 Step 10. Discuss and Iterate Use Page Notes to explain global issues, and explain specimic feedback desired Discussions allow Tweet- length comments from multiple stakeholders

57 RESOURCES

58 Books Communicating Design, Dan Brown Prototyping, Todd Zaki Warfel Axure for Mobile, Lennart Hennigs

59 Blog Posts and Tutorials Axure RP Core Training Creating Responsive Prototypes with Axure 7, Smashing Mag responsive- prototypes- with- adaptive- views- in- axure- rp- 7/ Axure Widget Libraries Best Practices, Axureland widget- library- best- practices/ Ten Commandments of Ef:icient Design in Axure, Smashing Mag commandments- of- efmicient- design- in- axure/

60 QUESTIONS?

61 FEEDBACK! Don t forget to evaluate this session! prototyping- drupal