Introducing Our New Visual & Customizable Table Stencil

Mock up data grids intuitively and visually – and leave the quirky syntax behind!

Data is the raw material of the global economy – guiding the reinvention of established companies, and driving the strategy of new ones. And that information’s power is compounded when it is easily shared, analyzed, visualized, understood and acted upon.

One of our highest priorities is data visualization and representation in all its forms, and last month, we introduced new chart and graph features and templates. Now it’s Tables’ turn.

1. Hero Image

Although grids and tables aren’t technically data visualizations, they’re often combined with charts and graphs – and often created by the same teams. Whereas charts tend to show the overview, shape, and summary of data, tables present detailed information in as close to its raw form as possible

Great tables have several advantages. They can provide access to precise numbers and specific information in large, dense data sets. And, they allow users to scan, compare, and analyze data in multiple directions – in the order of their choice – and take action based on those insights.

The Rationale Behind Our New Table

Grid and tables are an essential part of our users’ workflow, especially if their focus is on enterprise products. In complex apps for logistics, project management, sales, customer relations, or human resources, the majority of screens may contain – or simply be – a grid or table.

The problem was, our old Grid stencil worked fine for small tables with only three or four rows and columns. But, if you wanted to mock up complex data grids, a syntax-based stencil just wasn’t up to the task.

Improving the Grid has consistently been one of the most frequently recurring topics on our support channels – and your message was clear: We needed a better grid solution. So, our rationale for creating a new Table stencil was, quite simply, our users’ voice. The only question was how to solve the problem.

The Grid’s syntax based approach wasn’t easily scalable – we would have had to invent new syntax for every new formatting option. But that would only complicate your workflow, and be the very antithesis of our mission: Moqups should offer the most productive ways to visualize ideas of any kind – and visualize at the speed of thought! Visual-ize. 

The answer was clear. We had to go visual.

2. Table Overview

Our first approach was to try using open-source libraries in order to save a few dev cycles and release this to you sooner. But, once we evaluated those options, we realized that we had a Goldilocks problem – they were either too specialized or too generic for our needs. So we would have to handcraft a solution. It took us a few sprints – but it’s finally here.

It was a fun, but intensive exercise. Although we often felt as though we were reinventing Excel, the process allowed us to prepare the underlying architecture for rapid iteration and the expansion of features. 

And, since this new stencil is a central piece of our future development, it’s been built with all kinds of future interoperability in mind – like the ability to share data to other stencils such as charts, import data dynamically from external sources, and much more. But, right now, it’s all about simplifying your workflow and making you more productive. 

The new Table stencil offers a completely visual editing experience and provides a new set of features that allow you to customize pretty much every aspect of a single or multiple table cells. And, it tries to mimic the functionality of popular spreadsheet editors so your muscle memory should feel at home in the new environment!

So, let’s take it for a test drive and see what you can do.

Learn more about Moqups →

Adding, Resizing, and Customizing Borders

You’ll find the new Table in the Stencils Panel. Add it to the page by dragging and dropping and, as you resize and rescale, hold down Shift if you want to maintain its aspect ratio.

3. Add and resize table

Before diving into detailed editing, you might want to use the dedicated section in the Format Panel to make some initial styling decisions about the table as a whole. Here you can choose to show or hide borders, adjust cell padding, select font family and size, set border attributes, or add a drop shadow:

4. Table - Format Panel

If you want to get rid of our placeholder text – and begin with a tabula rasa – before adding your own data, just click the Edit Data button (or double-click on the table) to reveal the Table headers and toolbar. Then use ‘Select all’ button in the upper-left corner (or Cmd+A) and hit delete on your keyboard.

5. Select All button

Insert, resize, and customize columns, rows, and cells

Once you’re in edit mode, the dots along the headers let you insert rows and columns in that particular position. To delete a row or column, select the appropriate header, and click the trash bin in the table’s toolbar.

6. Insert_delete column_row

To resize rows and columns, use the lines between their headers. If you want to set the rows and columns to equal sizes, just click the ‘Distribute Cell Sizes’ button.

7. Resize and distribute cells

Once you have selected a row or column’s header, you can use the toolbar to adjust the text’s horizontal and vertical alignment:

8. Text alignment

The toolbar also lets you select the font color and background color for individual and groups of cells. Color can help guide the reader’s eye to interesting information, and make it easier for them to navigate your data. This also comes in handy if you want to create in-table heatmaps – where higher numbers correspond to darker or more saturated cell backgrounds.

9. Text_cell colour

The bottom toolbar is also where you can merge and split cells:

10. Merge Cells

Use the rich-text editor to format text and add links

With a cell selected, press Enter/Return or double-click to edit the text. If you simply want to replace the text, then just start typing!

While you’re in edit mode, you can use the Quick Format toolbar to format, color or highlight selected text, or to add links.

11. Rich Text Edit

Lighting-fast keyboard shortcuts

Finally, a couple of tips for you power-users! While in edit mode, hit the Tab key to quickly navigate between table cells. Press Shift+Tab to go back to the previous cell. Or, continue pressing Tab on the last row to add new rows to your table.

12. Table tip

Moving forward with Tables

We know that there’s still some missing pieces to the puzzle – functionality that you need, and would make your work easier. We’re working on putting those pieces in place, but we would love to hear from you – about your priorities and use cases. So, please send us your wishlist at support@moqups.com. After all, Santa’s coming pretty soon!

Create a free account →

What’s New: October 2, 2019

New Features:

  • Our new Table offers a fully-visual editing experience, and replaces the old, syntax-based Grid stencil. Now, you can:
    • Quickly select, resize, and reformat rows and columns
    • Apply background color to rows, columns, and cells
    • Use rich text editing, and add links and highlights
    • Justify and align cell content, and apply both vertical and horizontal padding
    • Adjust cell-border width, format and color 
    • Merge, split, and distribute cells
  • The Sticky Note stencil is the latest addition to our ‘Callouts & Annotations’ category. Like the Callout, Bracket, Speech Bubble, and Thought Bubble, the Sticky Note has both Normal and Sticky modes – allowing it to either be attached to an object, or float freely. And, its ear can quickly be resized with the custom handle.
  • We’ve added an iPhone X stencil to the Stencil Library.

Improvements:

  • Components:
    • When you apply the ‘Detach Component’ option to a nested component, only the top-level component is detached; the nested sub-components are unaffected, and retain their component status.
    • Top-level components can now be locked.
  • View and Preview modes no longer include sidebars. Instead, the Page Tree and the Comment list can be opened by using buttons along the top toolbar.
  • Diagram extenders now connect to an adjacent object only if that object is another unlocked diagramming stencil. Otherwise, the extender creates a new diagramming object.
  • We’ve improved the Welcome Screen to include a Recent Projects sidebar, and a ‘Browse all projects’ link to the Dashboard. 
  • The Image Placeholder stencil now has a Rounded Corners control.
  • When an unsaved project is saved – either by autosave or by command – the user is now prompted to enter a project name, and to select a project owner.
  • Google Fonts have been updated to include new typefaces:
    • Bahianita, Barriecito, Beth Ellen, Be Vietnam, Big Shoulders Display, Big Shoulders Text, Blinker, Chilanka, Crimson Pro, Darker Grotesque, DM Sans, DM Serif Display, DM Serif Text, Farro, Fira Code, Gayathri, Grenze, Hepta Slab, Lacquer, Lexend Deca, Lexend Exa, Lexend Giga, Lexend Mega, Lexend Peta, Lexend Tera, Lexend Zetta, Libre Caslon Display, Libre Caslon Text, Literata, Liu Jian Mao Cao, Livvic, Long Cang, Manjari, Mansalva, Ma Shan Zheng, Noto Sans HK, Red Hat Display, Red Hat Text, Saira Stencil One, Turret Road, Vibes, Zhi Mang Xing

Bug Fixes:

  • The Radial Gradient – with Stretch mode enabled – now centers properly in the Wedge shape.
  • In Default Styles mode, the color picker for ‘Fills & Strokes’ now responds properly.
  • Fixed an issue that affected visibility actions in the HTML export.
  • Objects that have their aspect ratio locked, and have also been rotated, now resize properly.

 

Tidying Up with Moqups: 6 Tips to Declutter Your Projects

Make shared projects collaborator-friendly by channeling your inner Marie Kondo!

No matter where you live on the planet, it’s pretty much impossible to escape Marie Kondo, the queen of decluttering. Her three books, including the breakthrough, The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing have sold over 11 million copies in 42 countries. In January, she launched a Netflix series, and in 2020, she’ll turn her attention to both career and the workplace with a third book: Joy at Work.

What has made Kondo such a global phenomenon, beyond the effectiveness of the KonMari method, is her philosophical elevation of ‘tidying up’ – from dreaded chore to spiritual exercise.

For Kondo, decluttering is an act of empathy – for both the things and the people that surround us. She encourages us to envision the flow of an ideal day – and then arrange the elements of our home to best realize that experience.

1. Hero Image

Anybody working in the world of UX will recognize this approach. It’s what we do every day, with every page, modal, menu, and interaction. Declutter, simplify, clarify, speed up flow, reduce friction – and yes – spark joy!

And, when we get it right, users feel a magical combination of safety, familiarity, reassurance and delight as they pursue new paths, chase new ideas, or just fulfill basic tasks.

Tidying orders and relaxes the mind. – Marie Kondo

But as we focus on this experience for our users, it’s easy to overlook its importance for our colleagues. A clean, clear, relaxing and comfortable flow should be as much a part of our shared, internal projects as it is for our public-facing UI.

Organizations rely increasingly on distributed teams – and asynchronous collaboration is key to that kind of workforce and workflow. With so many team members and independent contractors sharing projects, tidying up helps eliminate confusion, reduce stress, and maintain both momentum and morale.

And it is not a stretch to say that this experience should be something joyous. We all know how dispiriting it is to be invited into a project, only to be overwhelmed by a sense of clutter, confusion and disorientation. But, how calming and relieving it is to open a shared document and immediately have an intuitive sense of that project’s purpose, hierarchy, and focus.

So, in the KonMari spirit, here are some tips to help your team keep projects tidy, accessible, and collaborator-friendly!

Learn more about Moqups →

Organize Pages in Folders to Create Clear Hierarchies

Sometimes, teams collaborate on projects asynchronously. Other times, an entire team – in the office and remote – will share a screen and create together in real time. In both cases, a clear hierarchy of well-named pages and folders can make that work clearer, faster, and more enjoyable.

As your project expands, find your inner Kondo, and start tidying by category! Take the inevitable mix of brainstorming pages, user flows, stakeholder feedback, experiments, and iterations, and group them into easily identifiable and accessible folders – making sure that both folders and pages are clearly named.

2. Organize Pages in Folders

To create a new folder, just click on the Create a New Folder icon – and then drag it where you need it. And to save time, try creating a folder directly from a selection of pages by right clicking and choosing ‘New Folder With Selection’.

3. New Folder With Selection

Check out our previous blog post for more about page and folder management, including nesting and hiding pages and folders.

Fit Page to Content to Keep Things Clean

During the initial creative process, it’s helpful to work on a page big enough to accommodate all your iterations and experiments. But that can result in all kinds of flotsam and jetsam littering the margins.

So, before inviting collaborators to share your work, take a moment to remove those vestigial distractions. Then, resize the page instantly by right-clicking and selecting ‘Fit page to content’.

4. Fit Page to Content

Resolve Comments to Reduce Clutter

When cross-functional teams collaborate – suggesting new ideas, clarifying requirements, and building consensus – project pages can become peppered with comments. When deadlines approach, and even more people join the conversation, it’s important to remove distractions and distinguish between current and obsolete conversations. 

To keep everybody’s eye on what matters, you can quickly declutter by resolving comments. Team members can then filter comments to show Unresolved, Resolved, or Unread conversations.

Just open the comment and hit the ‘Resolve’ button or, if you wish, leave a closing message to explain your action and click ‘Resolve & Reply’.

Resolve Comments

Resolving has advantages over deleting the thread because any member of the team can always restore the conversation when and if the topic needs further discussion.

Copy Pages to Combine & Consolidate Projects

Sometimes, initially distinct initiatives can begin to overlap, and teams just end up jumping back and forth between two related projects.

For example, you may have a design and marketing team working on the same initiative, but in two different Moqups projects. Or you might be developing two different features that end up having mutual dependencies. In cases like these, the best way to keep things tidy is to combine all or parts of those discrete projects.

Just right-click on any selection of pages and select ‘Copy Pages’ from the dropdown. Now, you can paste those pages into the Pages Panel of any other project.

6. Copy_Paste Pages

You can also use the same process to break overstuffed and unwieldy projects into smaller, more focused initiatives!

Team vs Project Libraries in Images and Templates

Both the Images and Templates libraries are subdivided into Team and Project templates. Taking advantage of these options makes it easier for your team to quickly find relevant assets – either by search or by scrolling.

Keep project-specific assets in the ‘Project’ library, and use the ‘Team’ repository for company-wide, reusable assets like branding elements and logos. Read more in the Images section of our Help Center.

7. Team vs Project Libraries

Archive Projects to Keep Your Dashboard Clean

Finally, don’t forget that you can always declutter the Projects window of your Dashboard by archiving inactive projects. This quick tip will help eliminate confusion and save your team time when they search for projects!

8. Archive Projects

And, if you ever need to re-examine an archived project, you can always restore it. Learn more about how to archive, restore, delete and recover projects in our Help Center.

Tidying up and decluttering helps streamline your colleagues’ workflow, and eliminate the wasted time that’s part of a confusing collaborative experience. You’ll know that you’ve got it right when team conversations focus on the choices and decisions to be made, not on where to find things!

Create a free account →

New Chart Templates & Features Make Data Visualization a Breeze

It’s now easier to start, experiment, and customize your charts and graphs.

Data visualization used to be the province of financial analysts, sales teams, and graphic designers, but it is now ubiquitous throughout competitive organizations. Departments at all levels are being asked to set their own goals, establish KPIs, track progress, and evaluate outcomes.

Charts_Vector_WhiteSky

In a data-driven world, all kinds of teams need to create charts and graphs for their dashboards, presentations, and reports. And to turn data into compelling stories, they want to be able to experiment with different forms of representation – and customize the results to suit both their business and their audience.

Last year, we introduced Charts so that teams could create quick charts and graphs – right where they work – without switching apps or creative context. Since then, we’ve worked hard to improve every aspect of that experience, making it faster and easier for your team to start, experiment, customize and communicate their data in visual form.

New chart & graph templates to jump-start your work

You can always start your chart from scratch. But it is often helpful – and quicker – to browse a collection of pre-made templates. Relevant examples can provide inspiration, and suggest all sorts of ideas for customization. 

But more importantly, they can help your team understand the types of charts well suited to specific categories of data – and the best-practices for each of those graphs.

To help your team get going, we’ve added 46 charts and graphs to our template pages.  

Browse by chart type and use case, and then simply click ‘Edit this chart’ to open your template in Moqups and start customizing it to fit your requirements.

2) New Templates

Try our free templates →

Switch between chart types to find one that best suits your data

Chart stencils now have a popover toolbar that lets you experiment with a variety of chart types – to find the one that works best for your data, context and audience.

3) Change Chart Type

As well as the Chart Type buttons, we’ve also added a handy Edit button. This makes it easy to cut and paste data from CSV files, customize colors, and label your values and categories.

Visualize and analyze any kind of process with our new funnel chart 

Funnel charts are used to represent and analyze the progressive stages of any process or procedure. 

They can help identify bottlenecks and problems, and are great for visualizing website conversions, sales pipelines, purchasing funnels, customer retention, order fulfillment, employee and volunteer recruitment, and PPC promotional campaigns.

You’ll find our new Funnel Chart stencil in the Charts section of the Stencils library. 

4) Funnel Chart Tour

If you want to learn more about common use cases – or start with a ready-made example – check out our Funnel Chart template page.

Show value labels right on the chart itself

Sometimes the chart speaks for itself, and values along the axis are sufficient. Other times, you may want your audience to focus on the specific values themselves. That’s why we’ve added the option to show values right on the chart – either as count or percentage values.

To show or hide value labels:

  1. Click on any chart on the page 
  2. Navigate to the Chart Style section of the Format Panel
  3. Enable Show values 

5) Show Chart Values

Render chart values as percentages

You now have the option to render chart values as percentages. This is useful for any chart that shows the relationship of parts to a whole, especially Pie and Donut charts, Grouped Bar and Column charts, and Stacked Column, Bar and Area charts. You’ll find this option in the Chart Style section of the Format Panel, right next to Show Values.

For Pie and Donut charts, rendering values as percentages simply shows, for each slice, that section’s percentage of the whole:

6. Render as Percentage

For Grouped Bar or Column charts, this option displays the percentage for each subcategory that makes up the larger, grouped category:

6.1) Render as Percentage

For Stacked charts – whether Bar, Column, or Area – render as percentage has a much more dramatic effect, changing the visual representation of the chart to a ‘100% Stacked Chart’:

6.2) Render as Percentage

We’ve made all our charts easier to read

Finally, a couple of smaller notes! We’ve improved the presentation of all our charts, making them easier on your audience’s eye!

We added digit-group separators to large value numbers making it possible for actual humans to read! Instead of 10000, you’ll now see 10,000. And, we also improved the representation of negative values in our Stacked Bar and Stacked Column charts, making them simpler to parse at a glance.

7) Negative Values

We hope these new features and templates make it easy for your team to build BI dashboards, prepare reports, and create presentations. 

What’s next for Charts? Well, that’s partially in your hands. We need your feedback and suggestions to make charting and graphing even better in Moqups. So, please send us your thoughts at support@moqups.com.

On our side, we’re already at work improving our color themes, and creating additional templates – like SWOT, 5 Whys, Business Model Canvas, Empathy Maps, etc. – as part of a new ‘Strategy & Analysis’ section. So stay tuned!

Try our free templates →